Удалить пули из ли

Question

Я JavaScript новичок, и я создаю небольшую функцию выбора. Я хотел бы отобразить мои li в виде маленьких блоков, которые при выборе добавляют другой цвет фона.

Я столкнулся с проблемой с моим ul, я не могу удалить маркеры, чтобы поместить свои элементы в правильная линия. Он отображает его в виде каскада, и я не могу понять, почему, даже если я использовал list-style-type: none;

Вот мой код, если вы хотите взглянуть:

var part = document.querySelector('#part-list ul');

function clickHandlerPart(e) {
  if (n == 1) {
    if (e.target.tagName !== 'LI') {
      console.log(e.target);
      if (e.target.className == "addpart") {
        console.log('selected');
        e.target.className = 'removepart';
        e.target.style.backgroundColor = '#9361bf';
        e.target.style.fontSize = '20px';
        e.target.style.marginLeft = '30px';
        e.target.style.border = '1px solid #fff';
        e.target.style.borderRadius = '4px';
        e.target.style.padding = '10px, 10px, 10px, 10px';
        e.target.style.float = 'left';
        part.appendChild(e.target);
      } else {
        console.log('unselected');
        e.target.className = 'addpart';
        e.target.style.backgroundColor = '#fff';
      }
      n++;
      console.log('****************');
    }
  } else {
    n = 1;
    return;
  }
}
part.addEventListener('click', clickHandlerPart);

#parts {
  margin-left: 30px;
  display: inline;
  white-space: nowrap;
}

#parts h2 {
  text-align: center!important;
}

#parts ul {
  list-style-type: none;
}

#parts li {
  border: 1px solid #fff;
  font-size: 20px;
}

.addpart,
.removepart {
  float: left;
  padding: 10px, 10px, 10px, 10px;
  font-size: 20px;
  margin-left: 30px!important;
}

<div id="part-list">
  <h2>Which part(s) have you been working on today?</h2>
  <ul>
    <li>
      <span class="addpart">Decoratives</span>
    </li>
    <li>
      <span class="addpart">Windows</span>
    </li>
    <li>
      <span class="addpart">Signage Gibela</span>
    </li>
    <li>
      <span class="addpart">Signage Prasa</span>
    </li>
    <li>
      <span class="addpart">Stripes</span>
    </li>
    <li>
      <span class="addpart">Others</span>
    </li>
  </ul>
</div>

Answer 1

Пули для li могут управляться свойством list-style для элемента ul.

ul {
    list-style: none;
}

Answer 2

В CSS вы стилизуете селектор идентификатора #parts, но у вас нет ничего в вашем html с этим идентификатором. Удалите идентификатор и просто выберите элемент.

ul {
    list-style: none;
}

Answer 3

На самом деле в вашем css была какая-то проблема. Пожалуйста, проверьте мое решение. Я надеюсь, что это поможет.

var part = document.querySelector('#part-list ul');

function clickHandlerPart(e) {
  if (n == 1) {
    if (e.target.tagName !== 'LI') {
      console.log(e.target);
      if (e.target.className == "addpart") {
        console.log('selected');
        e.target.className = 'removepart';
        e.target.style.backgroundColor = '#9361bf';
        e.target.style.fontSize = '20px';
        e.target.style.marginLeft = '30px';
        e.target.style.border = '1px solid #fff';
        e.target.style.borderRadius = '4px';
        e.target.style.padding = '10px, 10px, 10px, 10px';
        e.target.style.float = 'left';
        part.appendChild(e.target);
      } else {
        console.log('unselected');
        e.target.className = 'addpart';
        e.target.style.backgroundColor = '#fff';
      }
      n++;
      console.log('****************');
    }
  } else {
    n = 1;
    return;
  }
}
part.addEventListener('click', clickHandlerPart);

#parts {
  margin-left: 30px;
}

#parts h2 {
  text-align: center!important;
}

ul {
  list-style: none;
}

#parts li {
  border: 1px solid #fff;
  font-size: 20px;
}

<div id="part-list">
  <h2>Which part(s) have you been working on today?</h2>
  <ul>
    <li>
      <span class="addpart">Decoratives</span>
    </li>
    <li>
      <span class="addpart">Windows</span>
    </li>
    <li>
      <span class="addpart">Signage Gibela</span>
    </li>
    <li>
      <span class="addpart">Signage Prasa</span>
    </li>
    <li>
      <span class="addpart">Stripes</span>
    </li>
    <li>
      <span class="addpart">Others</span>
    </li>
  </ul>
</div>

Answer 4

Просто удалите стиль из списка ниже CSS

li {
  list-style: none;
}

Answer 5

Я думаю, что ваша проблема решается сейчас:

var part = document.querySelector('#part-list ul');

function clickHandlerPart(e) {
  if (n == 1) {
    if (e.target.tagName !== 'LI') {
      console.log(e.target);
      if (e.target.className == "addpart") {
        console.log('selected');
        e.target.className = 'removepart';
        e.target.style.backgroundColor = '#9361bf';
        e.target.style.fontSize = '20px';
        e.target.style.marginLeft = '30px';
        e.target.style.border = '1px solid #fff';
        e.target.style.borderRadius = '4px';
        e.target.style.padding = '10px, 10px, 10px, 10px';
        e.target.style.float = 'left';
        part.appendChild(e.target);
      } else {
        console.log('unselected');
        e.target.className = 'addpart';
        e.target.style.backgroundColor = '#fff';
      }
      n++;
      console.log('****************');
    }
  } else {
    n = 1;
    return;
  }
}
part.addEventListener('click', clickHandlerPart);

#parts {
  margin-left: 30px;
  display: inline;
  white-space: nowrap;
}

#parts h2 {
  text-align: center!important;
}
ul {
  list-style: none;
}

#parts li {
  border: 1px solid #fff;
  font-size: 20px;
}

.addpart,
.removepart {
  float: left;
  padding: 10px, 10px, 10px, 10px;
  font-size: 20px;
  margin-left: 30px!important;
}

<div id="part-list">
  <h2>Which part(s) have you been working on today?</h2>
  <ul>
    <li>
      <span class="addpart">Decoratives</span>
    </li>
    <li>
      <span class="addpart">Windows</span>
    </li>
    <li>
      <span class="addpart">Signage Gibela</span>
    </li>
    <li>
      <span class="addpart">Signage Prasa</span>
    </li>
    <li>
      <span class="addpart">Stripes</span>
    </li>
    <li>
      <span class="addpart">Others</span>
    </li>
  </ul>
</div>