使用 Javascript 从 DOM 中删除特定列表项

Question

我的 DOM 中有以下无序列表。我目前正在寻找一种方法，可以使用 Javascript 删除特定列表项。

<ul class="list">
  <li id="1">Depy</li>
  <li id="2">HI</li>
  <li id="3">WA</li>
  <li id="4">FA</li>
</ul>

我正在用 JS 创建一个函数，它接受一个字符串参数。例如 "FA" 然后它应该删除在其内容中包含字符串的查找和删除列表项。

总而言之，如果内容中有匹配的字符串，我想按特定列表元素删除。

Answer 1

创建一个包含 li 个元素的数组，然后遍历它们并删除具有正确内容的项目：

function removeListItemByText(text) {
  const li = [...document.querySelectorAll("li")];
  li.forEach(elem => {
    if (elem.innerText == text) elem.parentNode.removeChild(elem);
  });
}

document.getElementById("button").onclick = function() {
  removeListItemByText("FA");
};

<ul class="list">
  <li id="1">Depy</li>
  <li id="2">HI</li>
  <li id="3">WA</li>
  <li id="4">FA</li>
</ul>

<button id="button">Remove FA</button>

使用 Javascript 从 DOM 中删除特定列表项

Remove specific list item from DOM using Javascript

html

javascript

dom

html-lists