我试图阻止我的删除图标在应用于 'LI' 元素时获得删除线功能

Question

我试图只在“LI”元素中添加删除线，但是“垃圾桶”图标正在使用删除线，如下面的屏幕截图所示，

let input = document.querySelector('#todo');
let btn = document.querySelector('#btn');
let button = document.querySelector('#Clear-all')
let list = document.querySelector('#list');
let el = document.getElementsByTagName('li');
const deleteButton = document.getElementsByTagName("i");

// let's add the elements
function Items() {
  btn.addEventListener('click', () => {
    let text = input.value;
    if (text === "") {
      alert('You must add something in the field below');
    } else {
      let li = document.createElement("li");
      li.innerHTML = text;
      list.insertBefore(li, list.childNodes[0]);
      input.value = "";
      var createDeleteButton = document.createElement("i");
      createDeleteButton.classList.add("fa", "fa-trash");
      li.appendChild(createDeleteButton);
      createDeleteButton.addEventListener('click', function() {
        li.innerHTML = "";
      })
    }
  })
}

Items();

// to add a strike through done 
list.addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('done');
  }
});

<div class="add-element">
  <input type="text" id="todo" placeholder="Type anything">
  <button id="btn">Add</button>
  <button id="Clear-all">Clear List</button>
</div>
<div class="element-list">
  <div id="div">
    <ul id="list">
      <li id="items"></li>
    </ul>
  </div>
</div>

Answer 1

您要找的是Event.stopPropagation()

createDeleteButton.addEventListener('click', function(event){
    event.preventDefault(); // <= Not sure if you need this one, just for precaution 
    event.stopPropagation();
    li.remove();
})

编辑：

list.addEventListener('click', ... 在 ul 元素上，所以它会影响 ul 中的所有元素，所有 li 包括删除按钮 i，无论你在哪里单击 ul 事件将被触发，我对您的代码做了一些更改，删除了 ul 事件，为每个元素添加一个带有事件侦听器的复选框，以便您的 li 元素被单独划过。

let input = document.querySelector('#todo');
let btn = document.querySelector('#btn');
let clear = document.querySelector('#Clear-all')
let list = document.querySelector('#list');
let el = document.getElementsByTagName('li');

// let's add the elements
function Items() {
  btn.addEventListener('click', () => {
    let text = input.value;
    if (text === "") {
      alert('You must add something in the field below');
    } else {
      // Create Item
      let li = document.createElement("li");
      list.insertBefore(li, list.childNodes[0]);
      input.value = "";
      
      // Create a text container element
      const textContainer = document.createElement('b');
      textContainer.innerText = text;
      li.appendChild(textContainer);
      
      // Add a delete button
      const deleteButton = document.createElement("i");
      deleteButton.classList.add("fa", "fa-trash");
      deleteButton.innerText = "X"; // <= Remove this line if you want to remove the X
      li.appendChild(deleteButton);
      deleteButton.addEventListener('click', function() {
        li.remove();
      });
      
      //Add a checkbox for the strike through
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      deleteButton.classList.add("fa", "fa-trash");
      li.prepend(checkbox);
      checkbox.addEventListener('change', function() {
        if(checkbox.checked) li.classList.add("done");
        else li.classList.remove("done");
      });
    }
  })
}

Items();

// Cear all function
clear.onclick = () => {
  list.innerHTML = "";
}

.done  b{
  text-decoration: line-through;
}

i {
  color: red;
  padding: 0 10px;
  cursor: pointer;
}

<div class="add-element">
  <input type="text" id="todo" placeholder="Type anything">
  <button id="btn">Add</button>
  <button id="Clear-all">Clear List</button>
</div>
<div class="element-list">
  <div id="div">
    <ul id="list">
    </ul>
  </div>
</div>

我试图阻止我的删除图标在应用于 'LI' 元素时获得删除线功能

I am trying to prevent my delete icon from getting the strike-through function when applied to 'LI' elements

html

javascript

css

font-awesome