首頁(yè) 猿問(wèn) （Vanila JS...

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

JavaScript

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

我正在嘗試我的第一個(gè)普通 JS CRUD DOM 操作項(xiàng)目。我已經(jīng)完成了添加項(xiàng)目功能，但是刪除功能無(wú)法正常工作。HTML代碼上有多個(gè)刪除按鈕，我希望單擊按鈕時(shí)將其刪除。但是，它僅適用于列表中的第一項(xiàng)。如果我單擊第二個(gè)或第三個(gè)刪除按鈕，它根本不起作用。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貢獻(xiàn)1816條經(jīng)驗(yàn) 獲得超6個(gè)贊

document.querySelector 返回第一個(gè)選定的元素。

也沒(méi)有一個(gè)函數(shù)在另一個(gè)函數(shù)中

最后為什么在加載時(shí)調(diào)用刪除？

我認(rèn)為你的意思是委托

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>

反對(duì) 回復(fù) 2023-11-12

哈士奇WWW

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個(gè)贊

因?yàn)?code>querySelector()只返回第一個(gè)匹配項(xiàng)：

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

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

反對(duì) 回復(fù) 2023-11-12

智慧大石

TA貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

我總是建議這樣做。

向您的 HTML 代碼添加一些語(yǔ)義。在本例中添加 classNames translation-card-list、translation-card等
通過(guò)將偵聽(tīng)事件委托給元素document并使用target事件參數(shù)的屬性來(lái)利用事件冒泡。這樣，您只有一個(gè)偵聽(tīng)器來(lái)提高性能，并且通過(guò)委派，您可以在運(yùn)行時(shí)添加按鈕，而無(wú)需以EventListeners復(fù)雜的方式添加新按鈕
使用closest的方法來(lái)使用Event我target在第 1 節(jié)中添加的語(yǔ)義

;(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>

反對(duì) 回復(fù) 2023-11-12

3 回答
0 關(guān)注
209 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

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

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

3 回答

添加回答