Question

我知道怎么做with JQuery但是我想删除带有vanilla JS的onClick元素（x）的框。根据{{3}}我需要删除子元素。至于这是我的尝试：

function remove() {
  var element = document.getElementById("box");
  element.parentNode.removeChild(element);
}

#box {
  background-color: lightgrey;
  color: white;
  width: 20em;
  height: 20em;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}
.remover {
  font-size: 10em;
  align
}

<div id="box">
  <div id="removeBox" onclick="remove()">
  <span class="remover">x</span>
  </div>
</div>

您是否介意只需点击“x”即可帮我删除整个框？ to this

非常感谢

Answer 1

不要使用onclick，这是不好的做法，原因如下：

混合代码和标记
以这种方式编写的代码通过eval
在全局范围内运行，而直接编写的函数在用户范围内运行

使用事件绑定，如：

document.getElementById("box").addEventListener('click', function() {
  var element = document.getElementById("box");
  element.parentNode.removeChild(element);
});

这是一个完整的小提琴： fiddle

vanilla js删除id框

1 个答案: