JavaScript删除div（removeChild）

Question

So first of all I'm creating some divs dynamically (an event handler for some button) in a javascript function, I'm adding a button inside each div

    newdiv.id = counter;
    newdiv.innerHTML = "Product " + (counter + 1) + " <br><input type='text' name='myInputs[]'><button onclick=\"return false;
    document.getElementById('"+counter+"').parentNode.removeChild('"+counter+"');\">Delete item</button>";

that suppose to delete that div when the button is clicked.

It's not working for me. Would appretiate some help here guys.

Thanks

Answer 1

Your onclick event returns before doing the removeChild() call

If you write it in a clearer way you get:

function () {
  // leave the function
  return false; 
  // never executed, because you called return right before
  document.getElementById(counter).parentNode.removeChild(counter);
}

You have to return after you've done whatever you want. Move the return false; to the end of the event.

Answer 2

return ends the execution of the javascript. Nothing after the return statement is going to execute.

Answer 3

By default, a button in a form is type submit. To stop it submitting the form, make it type="button" . Then you don't need return false , which, if it was needed, should be at the end of the function.

An alternative is to use an input type button. It looks exactly like a button and also will not submit the form.

It would be far better to use DOM methods to add the extra elements and the listener, but here's an innerHTML version that is a bit easier to read (to me at least):

newdiv.innerHTML = 'Product ' + (counter + 1) + '<br><input type="text" name="myInputs[]">' + 
                   '<button type="button" onclick="var el = document.getElementById(\'' + (counter + 1) + '\');' +
                   'el.parentNode.removeChild(el);">Delete item</button>';

Answer 4

Aside from the wrong order of the statements, the removeChild call is incorrect. You have to pass a DOM element to removeChild , not an ID.

While you could generate all the elements with an HTML string, I find creating DOM elements directly a cleaner approach when dealing with event handlers:

newdiv.id = counter;
newdiv.innerHTML = "Product " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";

var button = document.createElement('button');
button.type = 'button'; // see RobG's answer
button.innerHTML = 'Delete item';
button.onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode);
};

newdiv.appendChild(button);

Answer 5

Looks like you're returning false before your code gets a chance to execute (try putting it after the document.getElementById statement chain). Also, I wouldn't begin any HTML attribute with a plus symbol.