如何刪除特定的 ul 的 li？

Question

我正在嘗試制作某種待辦事項清單。 當我單擊保存按鈕時，它會使用輸入值創建一個新的 li，並使用刪除按鈕創建另一個 ul 的 li。 我現在想要的是單擊刪除按鈕並刪除該 li。 出於某種原因，只有第一個按鈕將其刪除，並且從第一個到最后一個刪除每個 li。

這是html：

<input type="text" id="itemname">
<button id="save">Salvar</button>
<main id="lists">
    <ul id="itemlist"></ul> 
    <ul id="listbutton"></ul>
</main>

這是js：

let list = document.getElementById("itemlist")
let buttonList = document.getElementById("listbutton")
let listItem = document.getElementById("itemname")
let button = document.getElementById("save")

button.onclick = saveItem

function removeitem(){
    let newli = document.querySelector("#itemlist li")
    list.removeChild(newli)
}

function saveItem(){
list.innerHTML += '<li>'+listItem.value+'</li>'
buttonList.innerHTML += '<li id="newitem"><button id="removebutton">Remover</button></li>'


let delBtn = document.querySelector("#listbutton button")

delBtn.onclick = removeitem

}

Answer 1

您可能希望在事件偵聽器中使用Event.target ：

function removeitem(event){
    let newli = event.target.closest('li');
    list.removeChild(newli);
}

編輯：此外，您僅將事件偵聽器附加到一個元素，因為querySelector僅返回第一個匹配項。 要將事件偵聽器附加到所有元素，您需要迭代：

let delBtns = document.querySelectorAll("#listbutton button");
[...delBtns].forEach(el=> el.onclick = removeitem);

或者，您需要將單個事件偵聽器附加到更高的元素，這將利用事件冒泡：

let parentElement = document.querySelector("#listbutton")
parentElement.onclick = removeitem;

這是使用Element.closest作為最強大/最穩定的解決方案，但在您的示例中，由於按鈕是li標簽的直接子級，您也可以采用更簡單的方法並使用event.target.parentElement 。 但是，如果您將來更改 DOM 結構，這可能會中斷。

Answer 2

試試這個，我做了一些小調整，讓它更平滑一點。

 // Create a "close" button and append it to each list item var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); } // Click on a close button to hide the current list item var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function () { var div = this.parentElement; div.style.display = "none"; } } // Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function (ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); // Create a new list item when clicking on the "Add" button function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); // x for remove item span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function () { var div = this.parentElement; div.style.display = "none"; } } }

 <input type="text" id="myInput" placeholder="Title..."> <button onclick="newElement()" class="addBtn">Salvar</button> <main id="lists"> <ul id="myUL"></ul> </main>