如何使列表項的刪除按鈕起作用

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 項目。 這是鏈接