javascript - 从李中移除子弹

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 的元素符号可以由 ul 元素的 list-style 属性控制。

ul {
    list-style: none;
}