我想運行一個函式來洗掉按鈕的父元素。得到它后的父元素
let rem_display_btn1 = document.getElementById('rem_display_btn1');
像這樣
let rem_display_btn1 = document.getElementById('rem_display_btn1');
rem_display_btn1.addEventListener('click', () => {
let parentEl = rem_display_btn1.parentElement.parentElement;
parentEl.remove();
});
現在的問題是腳本在 HTML 檔案中加載的初始時刻，按鈕還不存在。即：rem_display_btn1是在另一個函式運行后產生的，并且該函式依賴于那些未在window.onload上運行的函式
如果有幫助，我還將顯示下面的功能：
// Cart list Table Element
let cart_list = document.getElementById('cart_list');
let numy = 0;
let htmlTR = '';
let cartUpdater = () => {
cart_list.innerHTML = "";
htmlTR = ''
numy = 0;
for(let a = 0; a < cart.length; a ) {
cart_list.innerHTML = "";
numy ;
htmlTR = `<tr id="htmlTR_ID${numy}">`;
htmlTR = `<td style="width: 7%;">${numy}</td>`;
htmlTR = `<td style="width: 25%;">${cart[a].name}</td>`;
htmlTR = `<td style="width: 25%;">${cart[a].price}</td>`;
htmlTR = `<td style="width: 15%; padding-left: 23px;"><button>-</button>1<button> </button></td>`;
htmlTR = '</tr>';
console.log(htmlTR)
cart_list.innerHTML = htmlTR;
}
for(let b = 0; b < cart.length; b ) {
var remBtn_TD = document.createElement('td');
remBtn_TD.style.width = '25%';
var remBtn = document.createElement('button');
remBtn.classList.add('rem_btn_');
// Where the button element gets the **id: rem_display_btn1**
// so I'm choosing the first button that is produced
remBtn.id = `rem_display_btn rem_display_btn${b 1}`;
remBtn.innerHTML = 'remove';
remBtn_TD.appendChild(remBtn);
console.log(cart_list.children[0].children[b]);
cart_list.children[0].children[b].appendChild(remBtn_TD);
}
}
我嘗試在cartUpdater() 函式之后添加一個 if 陳述句，以在將元素放入變數之前檢查document.getElementById('rem_display_btn1')但即便如此它仍然不存在
if (document.getElementById('rem_display_btn1')) {
let rem_display_btn1 = document.getElementById('rem_display_btn1');
rem_display_btn1.addEventListener('click', () => {
let parentEl = rem_display_btn1.parentElement.parentElement;
parentEl.remove();
});
} else {
console.log('Not There')
}
我在想是否有辦法獲得 HTML/WebPage 的當前狀態，所以我也嘗試將 if 陳述句放在 setTimeout 和 setInterval 函式中，但它們都不起作用。問題是我確信這是一種可行的方法，我只是想不通。
感謝期待。
添加 setInterval 函式：
setInterval(() => {
if (document.getElementById('rem_display_btn1')) {
let rem_display_btn1 = document.getElementById('rem_display_btn1');
rem_display_btn1.addEventListener('click', () => {
let parentEl = rem_display_btn1.parentElement.parentElement;
parentEl.remove();
});
} else {
console.log('Not There')
}
}, 4000);
對于 setTimeout：
setTimeout(() => {
if (document.getElementById('rem_display_btn1')) {
let rem_display_btn1 = document.getElementById('rem_display_btn1');
rem_display_btn1.addEventListener('click', () => {
let parentEl = rem_display_btn1.parentElement.parentElement;
parentEl.remove();
});
} else {
console.log('Not There')
}
}, 9000);
我使用了更長的時間來設定超時，因此我可以在獲得 rem_display_btn1 按鈕之前運行 cartUpdater() 函式
uj5u.com熱心網友回復：
您根本不需要參考按鈕的變數：
document.addEventListener('DOMContentLoaded', () => {
// Dropped: let rem_display_btn1 = document.getElementById('rem_display_btn1');
document.getElementById('rem_display_btn1').addEventListener('click', (e) => {
let parentEl = e.currentTarget.parentElement.parentElement;
// Do not use 'this' to reference the button;
// Cf. https://stackoverflow.com/a/46270771/
parentEl.remove();
});
});<div>
<button id="rem_display_btn1">Remove</button>
</div>備選方案 1（通過動態創建元素的代碼添加事件處理程式）
如果您想要附加事件處理程式的元素（即 . rem_display_btn1）在檔案最初加載后的某個未指定時間動態插入，請使用事件處理程式的 html 屬性：
function hnd_removeButton (e) {
let parentEl = e.currentTarget.parentElement.parentElement;
parentEl.remove();
}
document.addEventListener('DOMContentLoaded', () => {
setTimeout ( () => {
//
// At the time you create the dynamic element, add the proper event handler.
let e_btn = document.createElement('button')
, e_container = document.getElementById ( 'test-anchor' )
;
e_btn.setAttribute('id', 'rem_display_btn1');
e_btn.textContent = 'Remove';
e_btn.addEventListener('click', hnd_removeButton);
e_container.appendChild(e_btn);
}, 3000 );
});<div id="test-anchor">
<div>Waiting for button to appear</div>
</div>備選方案 2（監聽 DOM 更改）
另一種選擇是回應添加到 DOM 的元素。當前的 DOM API 實作提供了MutationObserver支持此任務的介面（注意：以前DOMSubtreeModified允許撰寫合適的處理程式的可用事件也已被棄用）。
function hnd_removeButton (e) {
let parentEl = e.currentTarget.parentElement.parentElement;
parentEl.remove();
}
function mobs_addClickHandler ( a_mutationsList, x_observer ) {
for (const o_mutation of a_mutationsList ) {
o_mutation.target.querySelector('#rem_display_btn1').addEventListener ( 'click', hnd_removeButton );
}
}
document.addEventListener('DOMContentLoaded', () => {
const observer = new MutationObserver(mobs_addClickHandler)
;
observer.observe ( document.getElementById ( 'test-anchor' ), { attributes: true, childList: true, subtree: true } );
setTimeout ( () => { // Demo only - Elements being added. The click event handler is attached in the event handler for 'DOMSubtreeModified'
//
// At the time you create the dynamic element, add the proper event handler.
let e_btn = document.createElement('button')
, e_container = document.getElementById ( 'test-anchor' )
;
e_btn.setAttribute('id', 'rem_display_btn1');
e_btn.textContent = 'Remove';
e_container.appendChild(e_btn);
}, 3000 );
});<div id="test-anchor">
<div>Waiting for button to appear</div>
</div>uj5u.com熱心網友回復：
您還可以將單擊偵聽器添加到立即存在的任何父元素（或整個document），并檢查單擊的元素是否與按鈕的 id 匹配。這樣，以后是否添加按鈕都沒有關系。
document.addEventListener("click", (e) => {
if (!e.target.matches("#rem_display_btn1")) return;
e.target.parentElement.remove()
})<div>
<button id="rem_display_btn1">Remove</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472194.html
標籤：javascript html dom dom 事件
上一篇：石頭剪刀布：第一輪得分保持在0