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 = ` {amp}lt;img class="unchecked" src="icon/unchecked.svg" /{amp}gt; ${value} {amp}lt;img class="delete" src="icon/icons8-multiply-26.png" /{amp}gt; ` list.appendChild(li) } } deleteItem.addEventListener('click', items) function items(item) { if (item.target.classList.contains('delete')) { item.target.parentElement.remove() } } 

Приведенный выше код позволяет мне удалить только один элемент, и это первый элемент в списке, который я пытаюсь решить самостоятельно, но не могу понять, что не так

Когда deleteItem.addEventListener('click', items) запущен, он только присоединяет eventListener к элементам, в настоящее время находящимся в DOM — те, которые вы создаете динамически, не будут иметь этот eventListener

Вместо этого вы можете использовать «делегирование событий», чтобы прослушивать клики и фильтровать эти клики на основе того, исходил ли клик из правильного элемента.

Вы можете прочитать больше о делегировании событий из блога Дэвидвальша и этот ответ StackOverflow

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

Вы также можете использовать атрибут elements onclick и передать this в параметре вызова функции — таким образом, вы можете получить доступ к HTML-элементу непосредственно из параметра; это также позволяет избежать наличия eventListener или использования if для проверки правильности класса / идентификатора

 // Add the function to the onclick attribute of the img {amp}lt;img class="delete" onclick="deleteItem(this)" src="demo.png" /{amp}gt; // in this function, 'item' refers to the DOM Element that was clicked function deleteItem (item) { item.parentElement.remove(); } 

Этот код позволит вам удалить первый элемент на ул.

 let list = document.getElementById("list"); // ul element let remove = document.getElementById("remove"); // remove button // on double click event remove.onclick = () ={amp}gt; { // remove the first child from the list list.removeChild(list.firstChild); } 
 {amp}lt;ul id="list"{amp}gt; {amp}lt;li{amp}gt;One{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;Two{amp}lt;/li{amp}gt; {amp}lt;li{amp}gt;three{amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;input type="button" id="remove" value="Remove First"{amp}gt;{amp}lt;/input{amp}gt;