let add = document.querySelector(".add")
add.onclick = function () {
let input = document.querySelector(".input").value;
let newTask = document.querySelector(".tasks")
let newTxt = document.createElement("div")
newTxt.className = "newDiv"
let newP = document.createTextNode(input)
newP.className = "newInput"
let deletButton = document.createElement("button")
let deletTxt = document.createTextNode("Delet")
deletButton.className = "deletButton"
deletButton.appendChild(deletTxt)
newTxt.appendChild(newP)
newTxt.appendChild(deletButton)
newTask.appendChild(newTxt)
deletButton.onclick = function () {
removeEle = document.getElementsByClassName(".newDiv")
removeEle.remove(removEle)
}
}
我用每個 div 的洗掉按鈕創建了幾個具有相同類名的 div 當我想洗掉一個特定的 div 時，我使用它來選擇它 querySelector
但是第一個元素總是被洗掉，而不是我要洗掉的 div
uj5u.com熱心網友回復：
使用以下陳述句，您將獲得第一個.newDiv，
document.getElementsByClassName(".newDiv")
相應地，您正在洗掉它。
您應該使用閉包和洗掉，newTxt因為它在您的事件處理程式宣告時已經可用。
deletButton.onclick = function(){
newTxt.parentNode.remove(newTxt)
}
uj5u.com熱心網友回復：
document.getElementsByClassName(".newDiv")
上面的代碼行將回傳類名為 newDiv 的第一個元素，這就是您的代碼洗掉第一個元素的原因。
因此，為了洗掉被點擊的元素，您必須選擇被點擊的按鈕并洗掉其父元素。
deletButton.onclick = function(){
this.parentNode.remove();
}
uj5u.com熱心網友回復：
document.getElementsByClassName 將始終回傳具有所有給定類名的所有子元素的類陣列物件。
這與您選擇從中洗掉專案的行沒有任何聯系，這涉及具有指定類名的所有元素。
element.remove呼叫也是錯誤的。
您可以通過從單擊事件的目標元素中選擇具有類名的最接近的元素來選擇觸發洗掉事件的行。newDiv
作業小提琴
let add = document.querySelector(".add")
add.onclick = function () {
let input = document.querySelector(".input").value;
let newTask = document.querySelector(".tasks")
let newTxt = document.createElement("div")
newTxt.className = "newDiv"
let newP = document.createTextNode(input)
newP.className = "newInput"
let deletButton = document.createElement("button")
let deletTxt = document.createTextNode("Delet")
deletButton.className = "deletButton"
deletButton.appendChild(deletTxt)
newTxt.appendChild(newP)
newTxt.appendChild(deletButton)
newTask.appendChild(newTxt)
deletButton.onclick = function (e) {
removeEle = e.target.closest('.newDiv');
removeEle.remove()
}
}<div class="tasks"></div>
<input type="text" class="input">
<button class="add">Add</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/419500.html
標籤：
下一篇：如何使單元格自動轉到新行