JavaScript 按 class 名称删除列表元素

Question

我的 javascript 函数在删除元素方面遇到问题。下面是 div 菜单中的两个列表，每个 <li> 根据饮料类别和饮料本身标记为 class。我还有一个按钮可以打开一个模式框，用户可以在其中输入要删除的饮料类别。我决定通过按饮料类别将 <li> 命名为 classes 来解决这个问题，然后使用 js 函数从输入文本节点中按 class 名称获取元素并删除这些元素用户输入的内容。

<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>

<script>
        var modal = document.getElementById("myDeleteModal");

        // Get the button that opens the modal
        var btn = document.getElementById("openmodal");
        var closebtn = document.getElementById("closedbtn");


        // When the user clicks the button, open the modal
        btn.onclick = function () {
            modal.style.display = "block";
        }

        closebtn.onclick = function (event) {

            modal.style.display = "none";
        }
</script>

<script>
        (function () {
            document.querySelector('#delete').addEventListener('click', function () {
                let inputRemover = document.querySelector('#deletedrinktext');
                let itemRemover = document.createTextNode(inputRemover.value); 
                let listRemover = document.getElementsByClassName(itemRemover);
               
                    for (var i = 0; i < listRemover.length; i++) {
                        if (document.contains(listRemover)) {
                            listRemover[i].remove();
                        }
                    }


                


                inputRemover.value = ""; // clear input
            });
        })();
    </script>

所以我想要复制的是用户打开模态框，输入 coffee 并单击删除。这将从文档中删除以下两个元素：

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

此函数目前无法正常工作，我不确定我的 JS 在获取每个元素时是否存在错误，或者使用 class 方法是否不是解决此问题的方法？当我输入类别名称时，就像我在 HTML 中写的那样，列表中的元素仍然显示。

Answer 1

remove() 不是 javascript 中 Array 的函数。我认为您最好的方法是不显示要删除的元素。只需将您的处理函数更改为：

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 在没有模态功能的情况下尝试一下。

如果您可能想要重置列表，这对您也有帮助。为此，只需在要阻止的每个元素上设置显示属性。

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

JavaScript 按 class 名称删除列表元素

JavaScript removing list elements by class name

html

javascript

getelementsbyclassname