如何使列表项的删除按钮起作用

Question

我目前正在研究联系人列表程序。 我想让人们能够通过垃圾桶按钮删除列表中的联系人。 每个联系信息都有自己的按钮，人们可以删除他们想要删除的内容。 我的代码通过检查（chrome）没有显示任何错误，但代码不起作用。

 var demo = document.getElementById("demo"); function addName() { var fname = document.getElementById("fname").value; var entry = document.createElement("li"); var img = document.createElement("img"); img.src = "img/talkbox.png"; $(img).addClass("talkbox"); var deleteBtn = document.createElement("img"); deleteBtn.src = "img/delete.png"; $(deleteBtn).addClass("deleteBtn"); entry.appendChild(img); entry.appendChild(document.createTextNode(fname)); entry.appendChild(deleteBtn); demo.appendChild(entry); document.getElementById('fname').value = ""; }; const trashCan = document.getElementById("trashcan"); trashCan.addEventListener('click', removeEvent); function removeEvent(e) { const list = document.getElementById("demo"); if (e.target.classList.contains('deleteBtn')) { list.removeChild(e.target.parentElement); list.removeChild(list); }; };

 <div> <ul id="contactlist" class=ppl> <li id="pplli"> <img id="wetalk" class="talkbox" src="img/talkbox.png"> <p class="contactname">Aiden<img id="trashcan" class="deleteBtn" src="img/delete.png"></p> </li> <ol id="demo"> </ol> <br> <a href="#addform" class="pplbtn" id="add"><img id="plus" src="img/plus.png"></a> </ul> </div>

Answer 1

const trashCan = document.getElementById("trashcan");

如果您有一个项目列表，并且正在为此使用此代码，那么这将不起作用，因为 ID 在文档中需要是唯一的。 如果您创建多个元素并为它们提供相同的 ID，当您尝试通过其 ID 获取元素时，浏览器将不知道您在谈论哪个元素。

另外请注意，您应该使用适当的 HTML 元素来构建您的文档，否则会导致可访问性问题。 图像不是按钮。 考虑改用<button>元素。

Answer 2

我实际上不确定您如何处理删除工作。 但是，如果您打算在单击其中的删除按钮时删除一个项目。 我的意思是删除按钮在项目内部。 然后你可以使用document.querySelect和 js 中的remove方法只使用 select 项目。 这是链接