JavaScript按类名删除列表元素

我的javascript函数在删除元素方面有问题。下面是div菜单中的两个列表，每个列表根据饮料的类别和饮料本身由一个类标记。我还有一个按钮，可以打开一个模式框，用户可以在其中键入要删除的饮料类别。我决定通过按饮料类别使用类命名

，然后使用js函数从输入文本节点按类名获取元素，并使用用户键入的内容删除这些元素

<div class = "menu">
<ul>
  <li class = "coffee"><a href="#">french press</a></li>
  <li class = "tea"><a href="#">english breakfast/a></li>
  <li class = "milk"><a href="#">whole</a></li>
</ul>
<ul>
  <li class = "coffee"><a href="#">dark roast</a></li>
  <li class = "tea"><a href="#">green tea</a></li>
  <li class = "milk"><a href="#">two percent</a></li>
</ul>
</div>
<button type="button" id ="openmodal">Click Me!</button>

 <div id="myDeleteModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <h1 class="modal-title">
                <b>Type the drink category you want to remove </b>
            </h1>

            <input id="deletedrinktext" type="text" />
            <button id="delete">Remove</button>
            <button type="button" class="btn btn-defaultdeletedrink" id="closedbtn" data-dismiss="modal" onclick="">Close</button>



        </div>
    </div>

点击我！
键入要删除的饮料类别
去除
接近

var modal=document.getElementById（“myDeleteModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“OpenModel”）；
var closebtn=document.getElementById（“closedbtn”）；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
closebtn.onclick=函数（事件）{
modal.style.display=“无”；
}

（功能（）{
document.querySelector（“#delete”）.addEventListener（'click'，函数（）{
let inputRemover=document.querySelector（'deletedrinktext'）；
让itemRemover=document.createTextNode（inputRemover.value）；
让listRemover=document.getElementsByCassName（itemRemover）；
对于（var i=0；i

因此，我想复制的是，用户打开模式框，输入coffee并单击remove。这将从文件中删除以下两个要素：

<li class = "coffee"><a href="#">french press</a></li>
<li class = "coffee"><a href="#">dark roast</a></li>

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

remove（）

不是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';
  }
}


let-inputRemover=document.querySelector（'deletedrinktext'）；
让listRemover=document.getElementsByCassName（inputRemover.value）；
for（设i=0；i

在没有模态功能的情况下进行试验

如果您可能想重置列表，这也会对您有所帮助。为此，只需将每个元素的“显示”属性设置为“块”

另外，我不知道这是否是一个复制粘贴问题，但是在英语早餐中的
a
缺少一个
remove（）
在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';
  }
}


let-inputRemover=document.querySelector（'deletedrinktext'）；
让listRemover=document.getElementsByCassName（inputRemover.value）；
for（设i=0；i

在没有模态功能的情况下进行试验

如果您可能想重置列表，这也会对您有所帮助。为此，只需将每个元素的“显示”属性设置为“块”

另外，我不知道这是否是一个复制粘贴问题，但是在英式早餐上的
a
缺少一个

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';
  }
}