Удалить элемент self по клику
У меня есть элемент, который добавляется с помощью javascript в мой HTML-документ. Я пытаюсь удалить его, когда нажимаю на тот же элемент. Я еще не знаю идентификатор элемента, я только что включил образец идентификатора.
Я уже пытался посмотреть этот ответ здесь (Создание элемента, который может удалить себя?) и пытался использовать метод, представленный здесь (Javascript: как заставить элемент управления отправлять себя в методе), чтобы сослаться на элемент, но безуспешно.
Вот что у меня есть до сих пор.
function remove() {
var element = this.id;
//I have also tried using document.getElementByID(this.id)
element.remove();
//I have also tried using element.parentNode.removeChild(element); to remove the element.
}<div id = "i" onclick = "remove(this)">Sample text</div>Я не уверен, что я делаю неправильно, но это ошибка, которую я продолжаю получать.
"Uncaught TypeError: Cannot read property 'remove' of undefined"
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 9
"Uncaught TypeError: Cannot read property 'remove' of undefined"
Это означает, что объект, который вы пытаетесь удалить, не существует, что вполне логично, поскольку этот .id нигде не определен.
Чтобы правильно сослаться на элемент html с помощью javascript, вам нужно использовать функцию документ.getElementById(). Идентификатор html-элемента, который вы пытаетесь удалить, равен i, так что попробуйте document.getElementById("i");
function remove() {
var element = document.getElementById("i");
element.remove();
}<div id = "i" onclick = "remove(this)">Sample text</div>Другой — более элегантный способ — передать ссылку на объект, на который вы нажали, с помощью функции обратного вызова. Это просто делается добавлением мероприятие в качестве параметра. Внутри обратного вызова вы можете ссылаться на элемент, используя e.target.
function remove(e) {
var element = e.target;
element.remove();
}<div id = "i" onclick = "remove(event)">Sample text</div>Если вы хотите использовать это в обычной функции JS, вам нужно привязать это к функции. В противном случае по умолчанию будет использоваться объект окна, это в обычном js указывает на объект окна. Если вы хотите использовать это, чтобы указать на объект, вызывающий функцию, используйте ()=>{} стрелочные функции.
function remove(element) {
console.info(this) //will log Window Object
//I have also tried using document.getElementByID(this.id)
element.remove();
//I have also tried using element.parentNode.removeChild(element); to remove the element.
}<div id = "i" onclick = "remove(this)">Sample text</div>ваша функция удаления должна быть такой
function remove(elem){
elem.parentNode.removeChild(elem);
}
вы передаете this в своем html, который является самим тегом html, однако, когда вы используете this в своей функции js, эта this является самой функцией, поэтому вы получите ошибку, пытаясь использовать идентификатор функции js в качестве идентификатора элемента
Вы должны передать this через вызов функции в html onclick, чтобы он мог ссылаться на элемент, тогда вы должны использовать его в качестве параметра в определении функции, иначе, если вы используете this в определении функции, он будет просто ссылаться на окно объект.
Это будет работать нормально
function remove(el) {
var element = el;
element.remove();
}<div id = "i" onclick = "remove(this)">Sample text</div>Зачем хранить элемент в переменной, если вы просто хотите его удалить
Потому что onclick = "this.remove()" слишком мейнстрим
Не используйте встроенные прослушиватели событий (тот, что на кнопке в этом примере, предназначен только для упрощения).
function createDiv() {
let div = document.createElement('div');
div.textContent = `Sample text, created on ${new Date()}`;
div.addEventListener('click', remove);
document.body.appendChild(div);
}
function remove(e) {
e.target.remove();
}<button type = "button" onclick = "createDiv()">Add a div</button>Если вы не можете получить доступ к элементу для добавления прослушивателя, вы также можете использовать прослушиватель делегата:
document.addEventListener('click', remove);
function remove(e) {
// you need some check here if you don't want any element to be removed on clicking it
e.target.remove();
}<div>foo</div>
<div>Sample text</div>Чтобы соответствовать вашему запросу, использование outerHTML удалит элементы и его компоненты из DOM.
Это требует использования document.getElementById().
function remove(me) {
document.getElementById(me).outerHTML = ""
}<div id = "i" onclick = "remove(this.id)">Sample text</div>Лучшая практика кодирования, так как за сообщение проголосовали:
Использование 3 символов для идентификатора элементов лучше
Мы можем фильтровать элементы по типу с помощью
target.nodeName, но тип должен быть написан в верхнем регистре.
document.body.addEventListener("mousedown", function(e) {
console.info(e.target.nodeName, e.target.id)
if (e.target.nodeName === "DIV"){
document.getElementById(e.target.id).outerHTML = ""
}
}, false)<body>
<div id = "el1">Sample text</div>
<div id = "el2">Sample text</div>
<div id = "el3">Sample text</div>
<div id = "el4">Sample text</div>
<div id = "el5">Sample text</div>
<div id = "el6">Sample text</div>
</body>Я бы сделал что-то подобное, чтобы ваш JavaScript и CSS кэшировались. Просто убедитесь, что вы изменили имена файлов при обновлении файлов после развертывания (когда люди знают, что ваш сайт существует).
//<![CDATA[
/* external.js */
var doc, bod, M, I, S, Q;// for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
function remove(e){
e.parentNode.removeChild(e);
}
var sample = I('sample');
sample.onclick = function(){
remove(this);
}
}); // end load
//]]>/* external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
#content{
padding:7px;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div id='content'>
<div id='sample'>Sample Text</div>
</div>
</body>
</html>сначала возьмите свой элемент:
const myDiv = document.querySelector('div');
затем добавьте к нему прослушиватель событий щелчка, поэтому при нажатии на него вызывается метод обратного вызова, где «e.target» действует как «это», и, наконец, удаляете его с помощью remove():
myDiv.addEventListener('click', function(e){
e.target.remove();
});
Минималистское решение:
<div onclick = "this.remove()">Sample text</div>
Вы получаете
this.idи пытаетесь удалить это. Это будетthis.remove(), который не будет работать в IE, если вам не все равно. Кроме того, вы должны научиться отделять свой JavaScript от своего HTML.