Удаление элементов DOM с помощью Javascript
В настоящее время я не могу понять, как именно удалить элементы DOM.
Я знаю, что вы можете найти нужный элемент по идентификатору, а затем удалить его, в моем случае я создаю элементы с помощью функции каждый раз, когда нажимается клавиша «создать». Я также добавляю кнопку закрытия к каждому элементу, чтобы его можно было удалить.
Я знаю, что вы, вероятно, можете найти это в Интернете, но я даже не знаю, что искать.
Я хочу добавить событие щелчка к каждой кнопке, чтобы можно было определить, какая из них была нажата, а затем удалить соответствующий элемент.
Это то, что я использую для создания элементов при каждом нажатии кнопки.
(Я использую библиотеку 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.info(count_id);
}
Соответствующий раздел HTML. Я добавляю все в этот контейнер.
<div class = "row">
<div id = "charts-container" class = "container">
</div>
</div>
Я использую bootstrap, поэтому у меня нет для этого собственного CSS. Выложу соответствующий html-раздел.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете добавить событие щелчка к элементу и передать его ссылку. И затем вы можете вызвать эту функцию для ее события щелчка.
<div #divRef onclick = "deleteElement(divRef)">I'm a div</div>
В скрипте:
function deleteElement(element) {
element.parentNode.removeChild(element);
}
Я предполагаю, что под элементом вы подразумеваете все, а не только кнопку. Если да, то куда мне передать ссылку после создания элемента в функции? Извините за глупый вопрос...
Создайте функцию delete и передайте ей идентификатор элемента, который назначается динамически, вы можете увидеть один пример ниже, элемент имеет уникальный идентификатор «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>
Чтобы ваша кнопка была нажата, чтобы удалить упомянутый элемент (с родительским элементом, я предполагаю, что соответствующая полная строка должна быть удалена), принимая структуру как:
<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>
Не могли бы вы также опубликовать свои html и css, чтобы мы могли проверить функциональность функции javascript?