如何使列表项的删除按钮起作用
How to make the delete button of a list item work
我目前正在开发联系人列表程序。我想让人们能够通过垃圾桶按钮删除列表中的联系人。每个联系信息都有自己的按钮,人们可以删除他们想要删除的内容。我的代码没有通过检查显示任何错误 (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>
const trashCan = document.getElementById("trashcan");
如果您有一个项目列表并且为此使用此代码,则这将不起作用,因为 ID 在文档中需要是唯一的。如果您创建多个元素并为它们提供相同的 ID,当您尝试通过其 ID 获取元素时,浏览器将不知道您在谈论哪个元素。
另外请注意,您应该使用适当的 HTML 元素来构建您的文档,否则会导致可访问性问题。图像不是按钮。考虑改用 <button>
元素。
实际上我不确定您是如何处理删除工作的。但是,如果您打算在单击其中的删除按钮时删除一个项目。我的意思是删除按钮在项目内部。然后你可以使用 document.querySelect
select 项目并在 js 中使用 remove
方法。这里是 link
我目前正在开发联系人列表程序。我想让人们能够通过垃圾桶按钮删除列表中的联系人。每个联系信息都有自己的按钮,人们可以删除他们想要删除的内容。我的代码没有通过检查显示任何错误 (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>
const trashCan = document.getElementById("trashcan");
如果您有一个项目列表并且为此使用此代码,则这将不起作用,因为 ID 在文档中需要是唯一的。如果您创建多个元素并为它们提供相同的 ID,当您尝试通过其 ID 获取元素时,浏览器将不知道您在谈论哪个元素。
另外请注意,您应该使用适当的 HTML 元素来构建您的文档,否则会导致可访问性问题。图像不是按钮。考虑改用 <button>
元素。
实际上我不确定您是如何处理删除工作的。但是,如果您打算在单击其中的删除按钮时删除一个项目。我的意思是删除按钮在项目内部。然后你可以使用 document.querySelect
select 项目并在 js 中使用 remove
方法。这里是 link