Удаление элементов DOM с помощью Javascript

Question

В настоящее время у меня возникают проблемы с определением, как именно удалять элементы DOM.

Я знаю, что вы можете найти нужный элемент по его идентификатору, а затем удалить его, в моем случае я создаюэлементы с функцией каждый раз, когда нажимается клавиша «создать».Я также добавляю кнопку закрытия к каждому элементу, чтобы иметь возможность удалить его.

Я знаю, что вы, вероятно, можете найти это в Интернете, но я даже не знаю, что искать.

Iхочу добавить событие нажатия для каждой кнопки, чтобы можно было определить, какая из них была нажата, а затем удалить соответствующий элемент.

Это то, что я использую для создания элементов при каждом нажатии кнопки.

(я использую библиотеку 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 элемента, который назначен динамически, вы можете увидеть один пример ниже, элемент имеет уникальный идентификатор "el-" и назначенный идентификатор, этот идентификатор передается функции нажатием кнопки, а остальное выполняется удалить () функция

    <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>

Answer 2

Чтобы ваша кнопка была нажата, чтобы удалить указанный элемент (с родительским, я предполагаю, что соответствующая полная строка должна быть удалена), принимая структуру как:

<div class="parentDiv">
    <span>ele to be deleted</span>
    <input class="delBtn" type ="button">Delete</input>
</div>

 <script>
     $(document).ready(function(){
           $(".delBtn").click(function(event){
              $(event.target).closest(".parentDiv").remove();
          });
      }); 
 </script>

Answer 3

Вы можете добавить событие нажатия на элемент и передать его ссылку.И тогда вы можете вызвать эту функцию по событию щелчка.

<div #divRef onclick="deleteElement(divRef)">I'm a div</div>

В скрипте:

function deleteElement(element) {
    element.parentNode.removeChild(element);
}