Question

我有一个使用javascript添加到我的HTML文档中的元素。当我单击相同的元素时，我试图将其删除。我尚不知道该元素的ID，目前我仅提供了一个示例ID。

我已经在这里（Creating an element that can remove it self?）尝试查看此答案，并尝试使用此处（Javascript: How to make a Control send itself in a method）提供的方法来引用该元素，但是没有运气。

这是我到目前为止所拥有的。

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>

我不确定自己在做什么错，但这就是我不断遇到的错误。

“未捕获的TypeError：无法读取未定义的属性'remove'”

Answer 1

您必须通过HTML this中的函数调用传递onclick，以便它可以引用该元素，然后必须在函数定义中将其用作参数，否则，如果使用{{ 1}}在函数定义中，它将仅引用窗口对象。

这可以正常工作

this

function remove(el) {
  var element = el;
  element.remove();
}

Answer 2

为匹配查询，使用outerHTML将从DOM中删除元素及其组件。

这需要使用document.getElementById()。

function remove(me) {
  document.getElementById(me).outerHTML = ""
}

<div id="i" onclick="remove(this.id)">Sample text</div>

一种更好的编码实践，因为该帖子被推荐：

使用3个字符作为元素ID更好
我们可以使用target.nodeName按类型过滤元素，但是类型必须用大写形式。

document.body.addEventListener("mousedown", function(e) {
  console.log(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>

Answer 3

极简解决方案：

<div onclick="this.remove()">Sample text</div>

Answer 4

“未捕获的TypeError：无法读取未定义的属性'remove'”

这意味着您要删除的对象根本不存在，因为 this.id 并未在任何地方定义。

要使用javascript正确引用html元素，您需要使用 document.getElementById（）函数。您要删除的html元素的ID是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>

Answer 5

如果要在普通的JS函数中使用此函数，则需要将其绑定到函数。否则，它将默认为window对象，在普通js中，它指向window对象。如果要使用它来指向调用该函数的对象，请使用()=>{}箭头函数

function remove(element) {
   console.log(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>

Answer 6

您的删除功能应该是这样

function remove(elem){
elem.parentNode.removeChild(elem);

}

您正在html中传递this，这本身就是html标签，但是，当您在js函数中使用this时，this就是函数本身，因此尝试将js函数的id用作元素id会得到错误

Answer 7

首先获取元素：

const myDiv = document.querySelector('div');

然后向其添加click事件侦听器，以便在单击它时会调用回调方法，其中“ e.target”充当“ this”，最后使用remove（）将其删除：

myDiv.addEventListener('click', function(e){
  e.target.remove();
});

Answer 8

不要使用内联事件侦听器（此示例中按钮上的侦听器仅用于简化操作）。

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>

Answer 9

我会做这样的事情，所以您的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>

删除自身元素onclick

9 个答案: