删除调用 onclick 的元素

Question

我正在尝试创建一个通用函数来删除任何调用它的内容。我的代码如下：

function deletethis(n){
//n is unused in this shortened snippet
this.parentNode.removeChild(this);
}

<button onclick="deletethis(5)">Click to remove</button>

预期行为：按钮被删除。

实际行为：错误 无法读取未定义的属性"删除子项">

Answer 1

正如詹姆斯在评论中指出的那样。 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>

Answer 2

只需将 ID 传递给此函数，它应该可以:)

function removeElement(elementId) {
    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}

Answer 3

不要使用内联事件侦听器，this将正确设置：

function deletethis(n){
  this.parentNode.removeChild(this);
}
document.querySelector("button").addEventListener("click", deletethis);

<button>Click to remove</button>

Answer 4

你也可以利用事件，

function deletethis(event) {
event.currentTarget.remove();
}

<button onclick='deletethis(event)'>hello</button>