如何使用不可用的DOM对象运行函数？

Question

我想运行一个函数以删除按钮的父元素。 问题后，父元素

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.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/网页的当前状态总共获得，因此我也尝试将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);

对于SetteMeT：

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（）函数

Answer 1

您根本不需要引用按钮的变量：

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中的元素。 Current DOM API implementations provide the MutationObserver接口支持此任务（注意：以前可用的事件domsubtreemprodified，它也允许编写合适的处理程序也已被弃用）。

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>

Answer 2

您还可以将单击侦听器添加到任何立即存在的父元素（或整个文档），并检查单击元素是否匹配您的按钮的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>