Блог

Главная - Вопросы по программированию - JavaScript удалить уже существует

JavaScript удалить уже существует

#javascript #html

#javascript #HTML

Вопрос:

У меня есть вопрос о том, как удалить конкретные, уже созданные <li> с помощью Javascript.

 var Dodaja = document.getElementById('dodaj');
var Tekst = document.getElementById('tekst');
var Lista = document.getElementById('todo');
Dodaja.addEventListener('click', function() {
  var oNovaLista = document.createElement('li');
  oNovaLista.innerHTML = Tekst.value;
  Lista.appendChild(oNovaLista);
  oNovaLista.addEventListener("click", function() {
    Lista.removeChild(oNovaLista);
  })
});  
 <ul id="todo">
  <li>To do 1</li>
  <li>To do 2</li>
  <li>To do 3</li>
</ul>
<div id="input">
  <input type="text" id="tekst">
  <button id="dodaj">Dodaj</button>
</div>

С помощью этого кода я не могу удалить уже существующий <li> из HTML (‘To do 1’, ‘To do 2’, ‘To do 3’)

Ответ №1:

Вместо этого используйте делегирование событий — добавьте слушателя к родительскому #todo элементу и следите за кликами на дочерних <li> элементах:

 var Dodaja = document.getElementById('dodaj');
var Tekst = document.getElementById('tekst');
var Lista = document.getElementById('todo');
Dodaja.addEventListener('click', function() {
  var oNovaLista = document.createElement('li');
  oNovaLista.innerHTML = Tekst.value;
  Lista.appendChild(oNovaLista);
});

Lista.addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    e.target.remove();
  }
});  
 <ul id="todo">
  <li>To do 1</li>
  <li>To do 2</li>
  <li>To do 3</li>
</ul>
<div id="input">
  <input type="text" id="tekst">
  <button id="dodaj">Dodaj</button>
</div>

Вы также можете добавить прослушиватель отдельно как к элементам, которые существуют в pageload, так и к элементам, которые добавляются динамически, но это более уродливо:

 var Dodaja = document.getElementById('dodaj');
var Tekst = document.getElementById('tekst');
var Lista = document.getElementById('todo');
Dodaja.addEventListener('click', function() {
  var oNovaLista = document.createElement('li');
  oNovaLista.innerHTML = Tekst.value;
  Lista.appendChild(oNovaLista);
  oNovaLista.addEventListener("click", function() {
    Lista.removeChild(oNovaLista);
  })
});
for (const li of document.querySelectorAll('#todo li')) {
  li.addEventListener("click", function() {
    Lista.removeChild(li);
  })
}  
 <ul id="todo">
  <li>To do 1</li>
  <li>To do 2</li>
  <li>To do 3</li>
</ul>
<div id="input">
  <input type="text" id="tekst">
  <button id="dodaj">Dodaj</button>
</div>