javascript - 使用 DOM 从列表中删除项目

Question

我是网络开发新手。我正在学习 JS，在编写一些代码时，我仅使用 DOM 制作了一个简单的待办事项应用程序。

我无法正确理解从列表中删除项目的逻辑。我正在遍历 dom 并使用类似的方法； parentNode、removeChild 都这样做。我之前测试过使用 n:last-child 选择器从列表中删除最后一个项目的另一种方法，但我似乎找不到单独删除项目的方法。

HTML:

<ul>
  <li>grapes<span><button class="removeBtn">Remove</button></span></li>
  <li>amethyst<span><button class="removeBtn">Remove</button></li>
  <li>lavender<span><button class="removeBtn">Remove</button></li>
  <li>plums<span><button class="removeBtn">Remove</button></li>
</ul>

JS:

const   listDiv         = document.querySelector('.listDiv'),
        hideBtn         = document.querySelector('#hideBtn'),
        addItemBtn      = document.querySelector('button.addItemBtn'),
        addItemInput    = document.querySelector('input.addItemInput'),
        removeListBtn   = document.querySelector('button.removeListBtn'),
        removeToDo      = document.querySelectorAll('.removeBtn'),
        li              = document.querySelectorAll('li'),
        list            = document.querySelector('ul');

//adding an item to list
    addItemBtn.addEventListener('click', () => {
        let list = document.querySelector('ul'),
            newItem = document.createElement('li');
        newItem.textContent = addItemInput.value;
        if (addItemInput.value !== ''){
           list.appendChild(newItem);
            addItemInput.value = ''; 
        }
    })


//remove last item
    removeListBtn.addEventListener('click', () => {
        let list = document.querySelector('ul'),
        lastItem = document.querySelector('li:last-child');
        list.removeChild(lastItem);
    })


//delete a list item 
    removeToDo.addEventListener('click', () =>{
        list.removeChild(li);
    });

我知道它看起来很糟糕，但我只是想提高我的 dom 技能，并找到实现删除按钮功能的方法。有什么建议么？

Answer 1

1. 迭代所有按钮
2. 添加事件监听器
3. 遍历到列表容器并在点击时删除相应的子容器

var deletes = document.querySelectorAll('.removeBtn')
// Iterate all nodes
deletes.forEach(btn => {
  // Attach event listener. Note to preserve the button this-reference
  // by using the non-shorthand function
  btn.addEventListener('click', function() {
    var li = this.parentNode
    li.remove()
  })
})

<ul>
  <li>one<button class="removeBtn">Delete</button>
    <li>two<button class="removeBtn">Delete</button>
</ul>