javascript - 使用 Javascript 删除 DOM 元素

Question

我目前无法弄清楚如何删除 DOM 元素。

我知道你可以通过 id 找到你想要的元素，然后删除它，就我而言，每次按下“创建”键时，我都会用一个函数创建元素。我还为每个元素添加了一个关闭按钮，以便能够将其删除。

我知道您可能可以在网上找到此内容，但我什至不知道要搜索什么。

我想为每个按钮添加一个点击事件，以便能够检测到哪个按钮被按下，然后删除相应的元素。

这就是我每次按下按钮时用来创建元素的方法。

(我使用 RE:DOM 库添加元素)

var count_id = 0;
function addChart(){
    const test = el('.row',
                el('.col',
                el('.card mb-3',[
                    el('.card-header',[
                        el('i', {class: 'fa fa-area-chart'}),
                        el('a', {class: 'btn float-right', id: 'close-chart-'+count_id.toString()},
                            el('i', {class: 'fa fa-times'}))]),
                    el('.card-body',
                        el('#areaTest', {style:'width : 100%;'},
                        el('.loader'))),
                    el('.card-footer',
                    el('.row',
                    el('.col-lg-2',[
                        el('h6','Select a date'),
                        el('div', {class:'input-group date','data-provide':'datapicker'},[
                        el('.form-control', {type:'text'}),
                        el('.input-group-addon')])])
                    ))])
                ));

    test.id = count_id.toString();
    mount(document.getElementById('charts-container'),test);
    count_id++;
    console.log(count_id);
}

相关 HTML 部分。我正在将所有内容添加到此容器中。

<div class="row">
    <div id="charts-container" class="container">
    </div>
</div>

Answer 1

创建函数delete并传递给它动态分配的元素id，你可以看到下面的一个例子，元素有唯一的id“el-”并分配了id，该id通过按钮单击传递给函数，其余的通过remove()函数

    <button onclick="delete(123)"> DELETE </button>
    <p id="el-123"> i will be deleted </p>


    <script>
    function delete(id){
      document.getElementById("el-" + id).remove();
    }
    </script>