首頁猿問（Vanila JS...

（Vanila JS DOM）為什么刪除按鈕不適用于所有“刪除”類..？

JavaScript

慕姐8265434 2023-11-12 15:05:38

我正在嘗試我的第一個普通 JS CRUD DOM 操作項目。我已經完成了添加項目功能，但是刪除功能無法正常工作。HTML代碼上有多個刪除按鈕，我希望單擊按鈕時將其刪除。但是，它僅適用于列表中的第一項。如果我單擊第二個或第三個刪除按鈕，它根本不起作用。document.querySelector('li').addEventListener('click', deleteOrTick);//deleteTickfunction deleteOrTick(e) { console.log("check click") if (e.target.className == 'delete') { console.log("delete clicked") } deleteTask(e); // delete task function deleteTask(e) { let remove = e.target.parentNode; let parentNode = remove.parentNode; parentNode.removeChild(remove); }}deleteOrTick();<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card"> <li class="card border-success m-3" style="width: 18rem;"> <div class="card-body"> <h2 class="card-title">にほんご</h2> <p class="card-text">Japanese</p> </div> <button type="button" class="btn btn-outline-info">update</button> <button type="button" class="btn btn-outline-danger delete">delete</button> </li> <li class="card border-success m-3" style="width: 18rem;"> <div class="card-body"> <h2 class="card-title">おはよう</h2> <p class="card-text">Good morning</p> </div> <button type="button" class="btn btn-outline-info">update</button> <button type="button" class="btn btn-outline-danger delete">delete</button> </li> <li class="card border-success m-3" style="width: 18rem;"> <div class="card-body"> <h2 class="card-title">にほんご</h2> <p class="card-text">Japanese</p> </div> <button type="button" class="btn btn-outline-info">update</button> <button type="button" class="btn btn-outline-danger delete">delete</button> </li></ul>

查看完整描述

3 回答

瀟湘沐

TA貢獻1816條經驗獲得超6個贊

document.querySelector 返回第一個選定的元素。

也沒有一個函數在另一個函數中

最后為什么在加載時調用刪除？

我認為你的意思是委托

document.getElementById('card').addEventListener('click', function(e) {

const tgt = e.target;

const parent = tgt.closest('li');

if (tgt.classList.contains('delete')) parent.remove();

else if (tgt.classList.contains('update')) console.log("Update clicked for ",parent.querySelector(".card-title").textContent)

})

<p class="card-text">Japanese</p>

</div>

<button type="button" class="btn btn-outline-info update">update</button>

<button type="button" class="btn btn-outline-danger delete">delete</button>

</li>

<p class="card-text">Good morning</p>

</div>

<button type="button" class="btn btn-outline-info update">update</button>

<button type="button" class="btn btn-outline-danger delete">delete</button>

</li>

<p class="card-text">Japanese</p>

</div>

<button type="button" class="btn btn-outline-info update">update</button>

<button type="button" class="btn btn-outline-danger delete">delete</button>

</li>

</ul>

反對回復 2023-11-12

哈士奇WWW

TA貢獻1799條經驗獲得超6個贊

因為querySelector()只返回第一個匹配項：

Document 方法 querySelector() 返回文檔中與指定選擇器或選擇器組匹配的第一個元素。如果未找到匹配項，則返回 null。

window.getElementsByTagName()可能更適合您的情況

反對回復 2023-11-12

智慧大石

TA貢獻1946條經驗獲得超3個贊

我總是建議這樣做。

向您的 HTML 代碼添加一些語義。在本例中添加 classNames translation-card-list、translation-card等
通過將偵聽事件委托給元素document并使用target事件參數的屬性來利用事件冒泡。這樣，您只有一個偵聽器來提高性能，并且通過委派，您可以在運行時添加按鈕，而無需以EventListeners復雜的方式添加新按鈕
使用closest的方法來使用Event我target在第 1 節中添加的語義

;(function(d) {

const classNameCard = 'translations-card';

const classNameUpdateButton = 'translations-card-update-button';

const classNameDeleteButton = 'translations-card-delete-button';

const onClick = function(e) {

const target = e.target

if (!target.closest(`.${classNameCard}`)) {

return false

}

if (target.closest(`.${classNameUpdateButton}`)) {

updateAction(e);

} else if (target.closest(`.${classNameDeleteButton}`)) {

deleteAction(e);

}

const updateAction = function(e) {

console.log('update')

}

const deleteAction = function(e) {

const card = e.target.closest(`.${classNameCard}`);

const cardList = card.parentNode;

cardList.removeChild(card);

}

d.addEventListener('click', onClick)

}(document));

<p class="card-text">Japanese</p>

</div>

<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>

<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>

</li>

<p class="card-text">Good morning</p>

</div>

<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>

<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>

</li>

<p class="card-text">Japanese</p>

</div>

<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>

<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>

</li>

</ul>

反對回復 2023-11-12

3 回答
0 關注
191 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

（Vanila JS DOM）為什么刪除按鈕不適用于所有“刪除”類..？

（Vanila JS DOM）為什么刪除按鈕不適用于所有“刪除”類..？

3 回答

添加回答

（Vanila JS DOM）為什么刪除按鈕不適用于所有“刪除”類..？

（Vanila JS DOM）為什么刪除按鈕不適用于所有“刪除”類..？