使用Javascript DOM删除特定的LI

Question

我的网页中有以下ul。我目前正在寻找一种方法，该方法可以使用JS的DOM API删除特定的li。

<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然后在网页上删除包含FA的li或用户要删除的任何输入。我想按li中的特定字符串删除。

感谢阅读，祝您有美好的一天！

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>