首頁猿問使用其中的按鈕刪除 dom...

使用其中的按鈕刪除 dom 元素，香草 JS

JavaScript

喵喔喔 2023-09-14 20:22:09

我對此很陌生，并且一直在尋找一種方法來使用分配的 eventListener 制作“刪除”按鈕以刪除與它相關的元素（li）。我還不太了解JS，所以這可能不是最好的方法，但這就是我目前所擁有的：一個簡單的網頁<h1>The List</h1><ul> <li>Delete me<button id="del">x</button></li> <li>Delete me too<button id="del">x</button></li></ul>我想讓每個“del”按鈕刪除其父級 - 此按鈕嵌套的“li”。.我想寫一個可重用的函數。我可以得到一個想法，我需要“制作點擊功能來刪除父（ul）的子（li）”。如何將特定的“li”與嵌套在其中的“按鈕”連接起來？我也在想也許可以循環給它一個唯一的 id 或一個數字。我在這里有點迷茫，你能告訴我可以做什么嗎，考慮到我真的很新，還不能做任何框架，只是想能夠在 JS 中做到這一點。我這樣做是為了嘗試，但這太具體了，最終它需要在不知道順序的情況下對其中任何一個重復使用：const parent = document.getElementsByTagName('ul')[0];const child = parent.getElementsByTagName('li')[0];const del = document.getElementById('del');function removeMe() { parent.removeChild(child);}del.addEventListener('click', removeMe);謝謝！

查看完整描述

3 回答

慕姐4208626

TA貢獻1852條經驗獲得超7個贊

因為您希望在多個按鈕上添加相同的邏輯，所以應該使用而不是。該 ID 應該是唯一的。使用?Element.closest（），您可以找到最接近單擊發生的父節點，直到找到與提供的選擇器字符串匹配的節點。在此處閱讀代碼示例中的注釋classesids

?// deleteButtons is will be an array of buttons

const deleteButtons = document.querySelectorAll('.del');

deleteButtons.forEach( button => {

? // add the event listener to each button

? button.addEventListener('click', removeMe);?

});

function removeMe() {

? ?// this is the button

? ?// from the button you want to move up in DOM?

? ?// and find the closes <li> to remove

? ?this.closest('li').remove();?

}

<ul>

? <li>Delete me<button class="del">x</button></li>

? <li>Delete me too<button class="del">x</button></li>

</ul>

反對回復 2023-09-14

暮色呼如

TA貢獻1853條經驗獲得超9個贊

正如其他人所說，元素 ID?在文檔中應該是唯一的。

使用事件委派并使用數據屬性來識別應激活刪除的按鈕。

document.addEventListener('click', evt => {

? const origin = evt.target;

? if (+origin.dataset.deleteparent) {

? ? origin.closest("li").remove();

? }

});

/*?

? --explained--

? const origin = evt.target;

? ? ? ? ? ? ? ? ?^ where did the click originated?

? if (+origin.dataset.deleteparent)

? ? ? ^? ? ? ?^ only if the button contains data-deleteparent attribute

? ? ? ^ convert data-attribute value to Number.?

? ? ? ? If it's not there, or 0, nothing will happen

? ? origin.closest("li").remove();

? ? ? ? ? ?^ parent li? ?^

? ? ? ? ? ? ? ? ? ? ? ? ?^ remove it

? }

button[data-deleteparent] { color: red; border: none; background-color: transparent; cursor: pointer}

<ul>

? <li>Delete me <button data-deleteparent="1">✘</button></li>

? <li>Delete me too <button data-deleteparent="1">✘</button></li>

? <li>Delete me not <button>Do not delete</button></li>

</ul>

反對回復 2023-09-14

開滿天機

TA貢獻1786條經驗獲得超13個贊

只需使用 DOM 節點的屬性。另外，如上所述 - 在你的情況下，你應該使用 es 而不是 id，因為必須是唯一的。parentElementclassid

const buttons = document.querySelectorAll('.rm-button');

function rmParent() {

this.parentElement.remove();

}

buttons.forEach(button => {

button.addEventListener('click', rmParent);

});

<ul>

<li>Delete me<button class="rm-button">x</button></li>

<li>Delete me too<button class="rm-button">x</button></li>

</ul>

反對回復 2023-09-14

3 回答
0 關注
138 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

使用其中的按鈕刪除 dom 元素，香草 JS

使用其中的按鈕刪除 dom 元素，香草 JS

3 回答

添加回答

使用其中的按鈕刪除 dom 元素，香草 JS