Question

const list = document.getElementById('list')
const addtodo = document.getElementById('addtodo')
//const items = document.querySelector('.item')
const deleteItem = document.querySelector('.delete')
addtodo.addEventListener('keypress', submitTodo)

function submitTodo(event) {
    if (event.keyCode == 13) {
        event.preventDefault()
        let value = addtodo.value
        let li = document.createElement('li')

        li.innerHTML = `
        <img class="unchecked" src="icon/unchecked.svg" /> 
        ${value}
        <img class="delete" src="icon/icons8-multiply-26.png" /> `

        list.appendChild(li)
    }
}

deleteItem.addEventListener('click', items)


function items(item) {
    if (item.target.classList.contains('delete')) {
        item.target.parentElement.remove()
    }
}

上面的代码仅允许我删除列表中的一个项目及其第一个项目我尝试自行解决，但不知道怎么了

Answer 1

运行deleteItem.addEventListener('click', items)时，它仅将eventListener附加到DOM上的当前元素-您动态创建的元素将没有此eventListener

您可以使用“事件委托”来监听点击，并根据点击是否来自正确的元素来过滤这些点击

您可以从davidwalsh's blog和this StackOverflow answer

中了解有关事件委托的更多信息。

document.addEventListener('click', function(e) => {
  if(e.target && e.target.classList.includes('delete')){
    e.target.parentElement.remove() 
  }
});

您还可以使用元素onclick的属性，并在函数调用的参数中传递this-这样，您可以直接从参数访问HTML元素；这也避免了必须拥有eventListener或使用if来检查它是否是正确的类/ ID

// Add the function to the onclick attribute of the img
<img class="delete" onclick="deleteItem(this)" src="demo.png" />

// in this function, 'item' refers to the DOM Element that was clicked
function deleteItem (item) {
  item.parentElement.remove();
}

Answer 2

此代码将允许您删除ul上的第一个元素。

let list = document.getElementById("list"); // ul element
let remove = document.getElementById("remove"); // remove button

// on double click event
remove.onclick = () => {
  // remove the first child from the list
  list.removeChild(list.firstChild);
}

<ul id="list">
  <li>One</li>  
  <li>Two</li>
  <li>three</li>
</ul>
<input type="button" id="remove" value="Remove First"></input>

如何在点击时删除特定的li列表？

2 个答案: