如何使用 JavaScript 删除添加的列表项？

在前端开发中，我们常常需要添加、删除DOM元素，比如在一个待办事项列表中添加、删除任务项。那么在JavaScript中，如何删除我们添加的列表项呢？

1. 删除指定的列表项

如果我们已经知道了要删除的列表项的位置，可以使用 element.removeChild(child) 方法来删除指定位置的子元素。

const list = document.getElementById('list');
const listItem = list.childNodes[0];
list.removeChild(listItem);

在上述代码中，我们首先通过 document.getElementById 方法获取到了列表的父元素 list，然后又通过 list.childNodes[0] 获取到了我们要删除的子元素 listItem。最后通过 list.removeChild(listItem) 方法将其从父元素中移除。

2. 删除选中的列表项

如果我们是在页面中选择了某个列表项进行删除，那么我们需要在用户点击时触发删除逻辑。

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<button onclick="deleteItem()">delete selected</button>

在这个示例中，我们在列表项下方添加了一个“delete selected”按钮，当用户点击该按钮时，触发 deleteItem() 函数。

function deleteItem() {
  const list = document.getElementById('list');
  const selectedItem = document.querySelector('.selected');
  list.removeChild(selectedItem);
}

在 deleteItem() 函数中，我们首先获取了列表的根元素 list，然后通过 document.querySelector('.selected') 获取到了被选中的元素 selectedItem。最后，我们通过 list.removeChild(selectedItem) 来将该元素从父节点中移除。

3. 删除所有列表项

如果我们需要删除所有的列表项，可以使用 element.innerHTML = '' 方法来清空父节点中的所有子元素。

const list = document.getElementById('list');
list.innerHTML = '';

总结

以上就是在JavaScript中删除我们添加的列表项的方法。通过这些方法，我们可以轻松地在页面中增加/删除元素，为用户提供更加友好的交互体验。