Я пытаюсь создать общую функцию, которая удаляет все, что ее вызывает. Мой код выглядит следующим образом:
function deletethis(n){
//n is unused in this shortened snippet
this.parentNode.removeChild(this);
}
<button onclick = "deletethis(5)">Click to remove</button>
Ожидаемое поведение: кнопка удаляется.
Фактическое поведение: Ошибка Невозможно прочитать свойство removeChild неопределенного
this
не передается автоматически во встроенные обработчики событий.
5
— это идентификатор вышележащего div на пару иерархий выше. По предложению @koFTT я дам кнопкам их идентификаторы как «nbutton». (этот html будет сгенерирован автоматически)
Просто передайте идентификатор этой функции, и она должна работать :)
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
О, чувак, я боялся, что это будет мой единственный вариант. Они должны добавить мой метод, лол.
Не используйте встроенные прослушиватели событий, и this
будет установлен правильно:
function deletethis(n){
this.parentNode.removeChild(this);
}
document.querySelector("button").addEventListener("click", deletethis);
<button>Click to remove</button>
Как отметил Джеймс в комментариях. this
не передается автоматически. Попробуй это
function deletethis(ele, n){
//n is unused in this shortened snippet
ele.parentNode.removeChild(ele);
}
<button onclick = "deletethis(this, 5)">Click to remove</button>
Вы также можете использовать события,
function deletethis(event) {
event.currentTarget.remove();
}
<button onclick='deletethis(event)'>hello</button>
Что означает
5
вdeletethis(5)
?