JavaScript按类名删除列表元素

Question

我的javascript函数在删除元素时遇到了问题。下面是div菜单中的两个列表

• 以饮料的类别和饮料本身的类别为特征的。我还有一个按钮，可以打开一个模式框，用户可以在其中键入要删除的饮料类别。我决定通过命名来实现这一点。
• 使用按饮料类别分类的类，然后使用js函数从input text节点按类名获取元素，并删除用户键入的那些元素。

法式英语早餐/a>全黑烤绿茶2%点击我！键入要移除的饮料类别移除关闭

var modal = document.getElementById("myDeleteModal")；//获取打开模式的按钮var btn =document.getElementById(“myDeleteModal”)；var closebtn = document.getElementById("closedbtn")；//用户点击该按钮，打开模式btn.onclick = function () { modal.style.display = "block"；} closebtn.onclick =函数(事件){ modal.style.display =“无”；}(function () { document.querySelector('#delete').addEventListener('click'，function () { let inputRemover = document.querySelector('#deletedrinktext')；让itemRemover = document.createTextNode(inputRemover.value)；让listRemover = document.getElementsByClassName(itemRemover)；for (var i= 0；i< listRemover.length；i++) { if (document.contains( listRemover )) {listRemover我.remove()；}} inputRemover.value = ""；//清除输入})；})()；

因此，我想复制的是用户打开模式框，键入咖啡，然后单击删除。这将从文档中删除以下两个元素：

法式烘焙

这个函数到目前为止还不起作用，我不确定我的JS在获取每个元素时是否有错误，或者使用类方法不是解决问题的方法？当我像在HTML中一样输入类别的名称时，列表中的元素仍然显示。

Answer 1

remove()不是Array在javascript中。我认为你最好的方法就是不显示你想要删除的元素。要做到这一点，只需将您的处理程序函数更改为：

let inputRemover = document.querySelector('#deletedrinktext');
let listRemover = document.getElementsByClassName(inputRemover.value);

for (let i = 0; i < listRemover.length; i++) {
  if (document.contains(listRemover[i])) {
    listRemover[i].style.display = 'none';
  }
}

JSFiddle在没有模态功能的情况下尝试它。

如果您想要重置列表，这也会对您有所帮助。为此，只需将每个元素的display属性设置为block即可。

此外，我不知道这是否是复制粘贴问题，但a在英式早餐上少了一个<在结束标记中。