最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

喵喔喔 2023-09-14 20:22:09
我對(duì)此很陌生，并且一直在尋找一種方法來(lái)使用分配的 eventListener 制作“刪除”按鈕以刪除與它相關(guān)的元素 （li）。我還不太了解JS，所以這可能不是最好的方法，但這就是我目前所擁有的：一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)<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>我想讓每個(gè)“del”按鈕刪除其父級(jí) - 此按鈕嵌套的“l(fā)i”。.我想寫(xiě)一個(gè)可重用的函數(shù)。我可以得到一個(gè)想法，我需要“制作點(diǎn)擊功能來(lái)刪除父（ul）的子（li）”。如何將特定的“l(fā)i”與嵌套在其中的“按鈕”連接起來(lái)？我也在想也許可以循環(huán)給它一個(gè)唯一的 id 或一個(gè)數(shù)字。我在這里有點(diǎn)迷茫，你能告訴我可以做什么嗎，考慮到我真的很新，還不能做任何框架，只是想能夠在 JS 中做到這一點(diǎn)。我這樣做是為了嘗試，但這太具體了，最終它需要在不知道順序的情況下對(duì)其中任何一個(gè)重復(fù)使用：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貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個(gè)贊

因?yàn)槟Ｍ诙鄠€(gè)按鈕上添加相同的邏輯，所以應(yīng)該使用 而不是 。該 ID 應(yīng)該是唯一的。使用?Element.closest（），您可以找到最接近單擊發(fā)生的父節(jié)點(diǎn)，直到找到與提供的選擇器字符串匹配的節(jié)點(diǎn)。在此處閱讀代碼示例中的注釋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();?

}

<h1>The List</h1>

<ul>

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

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

</ul>





查看完整回答
反對(duì) 回復(fù) 2023-09-14
?
暮色呼如

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

正如其他人所說(shuō)，元素 ID?在文檔中應(yīng)該是唯一的。

使用事件委派并使用數(shù)據(jù)屬性來(lái)識(shí)別應(yīng)激活刪除的按鈕。

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}

<h1>The List</h1>

<ul>

? <li>Delete me <button data-deleteparent="1">&#x2718;</button></li>

? <li>Delete me too <button data-deleteparent="1">&#x2718;</button></li>

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

</ul>


查看完整回答
反對(duì) 回復(fù) 2023-09-14
?
開(kāi)滿天機(jī)

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

只需使用 DOM 節(jié)點(diǎn)的屬性。 另外，如上所述 - 在你的情況下，你應(yīng)該使用 es 而不是 id，因?yàn)楸仨毷俏ㄒ坏摹arentElementclassid


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


function rmParent() {

   this.parentElement.remove();

}


buttons.forEach(button => {

  button.addEventListener('click', rmParent);

});

<h1>The List</h1>

<ul>

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

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

</ul>


查看完整回答
反對(duì) 回復(fù) 2023-09-14
  • 3 回答
  • 0 關(guān)注
  • 147 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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