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

【问题标题】：How to make the delete button of a list item work如何使列表项的删除按钮起作用
【发布时间】：2020-04-14 17:00:45
【问题描述】：

我目前正在开发一个联系人列表程序。我想让人们能够通过垃圾桶按钮删除列表中的联系人。每个联系信息都有自己的按钮，人们可以删除他们想要删除的任何内容。我的代码通过检查（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>

【问题讨论】：

“我的代码通过检查 (chrome) 没有显示任何错误，但代码不起作用” 我将您的代码粘贴到可执行的 sn-p 中，它确实显示尝试删除时出错

标签： javascript list button removechild

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：