Как бы удалить каждый элемент после нажатия кнопки рядом с ним, используя простой Java-скрипт

Question

Ниже приведен HTML-код

 <ul>
        <li>Item 1<button class="btn">click</button></li>
        <li>Item 2<button class="btn">click</button></li>
        <li>Item 3<button class="btn">click</button></li>
        <li>Item 4<button class="btn">click</button></li>
        <li>Item 5<button class="btn">click</button></li>
 </ul>

Below is JS code

var ul=document.querySelector("ul");
var li= document.querySelector("li");
var button= document.querySelectorAll(".btn");

button.forEach(function(i){
    i.onclick=function(){
        ul.removeChild(li);
    }
})

, и приведенный выше код удаляет только первый элемент.Я действительно не знаю, как реализовать это.Действительно запутался в концепции html-коллекций и списков узлов.

Answer 1

Внутри обработчика выберите кнопки parentElement и remove() it:

var button = document.querySelectorAll(".btn");

button.forEach(function(button) {
  button.onclick = function() {
    button.parentElement.remove();
  }
})

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>

Вы также можете вместо этого использовать делегирование событий вместо добавления нескольких слушателей:

document.querySelector('ul').addEventListener('click', ({ target }) => {
  if (target.className === 'btn') {
    target.parentElement.remove();
  }
});

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>

Answer 2

Удалить только следующий элемент. Используйте с this.parentElement.nextElementSibling.remove()

или

еще с тем же элементом удалить используйте this.parentElement.remove()

var ul = document.querySelector("ul");
var li = document.querySelector("li");
var button = document.querySelectorAll(".btn");

button.forEach(function(i) {
  i.addEventListener('click',function() {
    this.parentElement.nextElementSibling.remove();
  })
})

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>

Answer 3

Вы можете получить кнопку и добавить к ней событие, которое на click найдет своего родителя и удалит ее

document.querySelectorAll(".btn").forEach(function(i) {
  i.addEventListener('click', function() {
    this.parentNode.remove()
  })
})

<ul>
  <li>Item 1<button class="btn">click</button></li>
  <li>Item 2<button class="btn">click</button></li>
  <li>Item 3<button class="btn">click</button></li>
  <li>Item 4<button class="btn">click</button></li>
  <li>Item 5<button class="btn">click</button></li>
</ul>