javascript - 使用带有 Javascript 的“this”删除 div

Question

我想做的是通过单击一个按钮来创建一个 div。在该 div 中，如果单击将删除另一个按钮，它将删除它所在的 div。因此，第一个按钮可能会创建许多带有此删除按钮的 div，但我希望删除按钮仅删除它所在的 div。有什么建议么？

Answer 1

HTML:

<input type="button" id='create' value="Create div!"/>

JS:

var i = 0;
document.onclick = function(e) {
    var t = e.target;
  if(t.id == 'create'){
     t.parentNode.innerHTML += '<div>I AM A CHILD '+(++i)+' <input type="button" class="child" value="DELETE ME!"/><br/></div>';
    }
  if (t.className == 'child') {
    t.parentNode.outerHTML = '';
  }
};

using document.onclick and detecting the target element can be used as a live click to monitor newly created divs.

Its early and my brain may be a little foggy and the code may be a little dirty

Here is a jsfiddle

Answer 2

如果您不需要在页面上保留“删除按钮”，请将click事件绑定在每个页面上，并.removeChild在父 div 的父元素上使用。
小提琴演示

Answer 3

您可以执行以下操作：

<script>

var addDiv = (function() {
  var div = document.createElement('div');
  div.appendChild(document.createTextNode('some text'));

  var button = document.createElement('button');
  button.appendChild(document.createTextNode('Remove...'));
  button.type = "button";


  return function() {
    var d = div.cloneNode(true);
    var b = button.cloneNode(true);
    b.onclick = function() {
      var d = this.parentNode;
      d.parentNode.removeChild(d);
    };
    d.appendChild(b);
    document.body.appendChild(d);
  };
}())

</script>

<button onclick="addDiv()">Add a div</button>

上面只是一个简单的例子来演示一种方法。请注意，如果您克隆一个元素，则作为属性添加的侦听器或通过 addEventListener 添加的侦听器将被删除（如果不这样做，此脚本会简单得多）。