我正在嘗試創建類似的東西，當我單擊submit添加到任務中的每個任務卡時，但是當我嘗試通過單擊紅色按鈕
洗掉卡（例如task2 ）時，它首先洗掉 task1，然后洗掉 task2x
這是我的代碼，我給了關閉按鈕一個onclick()按鈕：
'use strict'
const submitBtn = document.querySelector('#submit')
const inputVal = document.querySelector('.title')
const dateVal = document.querySelector('.date')
let taskDiv = document.querySelector('#task')
submitBtn.addEventListener("click" , function(event){
event.preventDefault()
let card = document.createElement('div')
card.classList.add('card')
card.innerHTML=`
<div >
<h3>${inputVal.value}</h3>
<button id="closeTasks" onclick="closeTask()">x</button>
</div>
<span>start : ${dateVal.value}</span>
<span>end : </span>
<div >
<button id="minimize"><i ></i></button>
<button id="info"><i ></i></button>
<button id="next"><i ></i></button>
</div>
`
taskDiv.appendChild(card)
})
function closeTask(){
let card = document.querySelector(".card")
card.remove()
}
uj5u.com熱心網友回復：
問題來自document.querySelector(".card")它將回傳與選擇器匹配的第一個元素（此處為 .card），但不是您需要的元素
一個想法可以是將事件作為函式的引數傳遞并使用目標來訪問單擊的按鈕。
要洗掉所有可用于element.closest獲取最接近元素匹配卡類的卡
function closeTask(event) {
const card = (event.target || event.srcElement).closest(".card");
card.remove()
}
function closeTask(event) {
const card = (event.target || event.srcElement).closest(".card");
card.remove();
}<div class="card">
<button onclick="closeTask(event)">X</button> card 1
</div>
<div class="card">
<button onclick="closeTask(event)">X</button> card2
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522734.html