时间戳

首页 > 解决方案 > JavaScript 按类名删除列表元素

javascript - JavaScript 按类名删除列表元素

问题描述

我的 javascript 函数在删除元素方面存在问题。下面是一个 div 菜单中的两个列表，每个列表都<li>根据饮料的类别和饮料本身标记一个类。我还有一个按钮，可以打开一个模式框，用户可以在其中输入要删除的饮料类别。我决定<li>通过按饮料类别命名类来解决此问题，然后采用 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>

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

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

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

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

标签： javascripthtmlgetelementsbyclassname

解决方案

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

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 属性设置为阻塞。

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

推荐阅读