使用“ this”和Javascript删除div

Question

What I would like to do is to create a div by clicking on a button. In that div there will be another button if clicked will delete the div that it is in. So potentially the first button will create many div's with this delete button inside but I want the delete button to only delete the div that it is within. Any suggestions?

Answer 1

If you do not need to keep the "delete button" on your page, bind the click event on each of them and use .removeChild on the parent element of the parent div.
FIDDLE DEMO

Answer 2

You can do something like:

<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>

The above is just a trivial example to demonstrate one way to go about it. Note that if you clone an element, listeners added as properties or by addEventListener are dropped (this script would be very much simpler if they weren't).

Answer 3

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