Add and remove div from body in javascript

Question

I'm kinda new to javascript, and probably there are other people who already asked similar question, but I hope you can help me anyway. I'm trying a simple basic operation of add/remove of a div. The add works fine, the remove is never called.

function $(el) {
    return document.getElementById(el);
}

function remove() {
    console.log("remove called");
    var child = $('second');
}

function addContainer() {
    console.log("addContainer called");
    var aContainer = document.createElement('div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "<a href=\"#\" onclick=\"remove()\">second</a>";
    document.body.appendChild(aContainer);
}

In the addContainer I try to add the onclick function callback, but apparently it doesn't work.

Here the jsfiddle of reference http://jsfiddle.net/m8kyav2b/

DO you know why 1- the remove function is never called? 2- once I click on the remove link, the innerHTML is removed, but not the div "second"?

Thanks a lot in advance

I defined the function $(el) at the beginning of the script. I used the same function in other scripts, never had problems with it. Is there any problem with the definition? Edit: @Xero: don't worry :) — CKY, Nov 22 '14 at 03:24

baao · Accepted Answer · 2014-11-22T03:32:56.057

3

Try it like this, it will work:

DEMO

function $(el) {
    return document.getElementById(el);
}

function removeit() {
    alert("remove called");
    var child = $('second');
    child.remove();


}

function addContainer() {
    console.log("addContainer called");
    var aContainer = document.createElement('div');
    aContainer.setAttribute('id', 'second');
    aContainer.innerHTML = "<a href=\"#\" onclick=\"removeit()\">second</a>";
    document.body.appendChild(aContainer);
}

SIDENOTE:

Calling remove() as your function won't work as it is a native javascript function. You didn't actually remove the div in your function, too!

edited Nov 22 '14 at 03:32

answered Nov 22 '14 at 03:25

baao

71,625
17
143
203

Hmm, I noticed a little hiccup, if you click "second", it disappears, and you click "move", it appears again, but you cannot hide it again. – Nov 22 '14 at 03:30
Thanks a lot guys, really appreciated. Not bad posting here for the first time and having the problem solved in 10 mins :) – CKY Nov 22 '14 at 03:34
I don't see why you cannot use `remove` as a function name. It is not a [reserved keyword](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords). Saying it cannot be used is completely invalid. – Derek 朕會功夫 Nov 22 '14 at 03:36
@Derek朕會功夫 thanks, I thought wrong there then. But how can you use remove as a self-made function name then? – baao Nov 22 '14 at 03:38
@baao - You can call it via `window.remove()` if your function lives in the global scope. – Derek 朕會功夫 Nov 22 '14 at 03:38

score 1 · Answer 2 · edited May 23 '17 at 11:51

Here is a helpful link: Remove element by id. The below code is tested and works (it will upon mouse over delete the HTML tag, so basically just change the syntax around a little to have it delete what ever tag you want.

<p id="el" onmouseover="remove()">test</p> <!--we are deleting with JavaScript this HTML <p> tag. -->

function remove() {
  var element = document.getElementById("el"); /* finding and assigning element to variable element */
  document  
  element.parentNode.removeChild(el); // then deleting the parent and child (please refer to link)
}

as far as the rest of your question. Look here: add onclick event to newly added element in javascript.

Derek 朕會功夫 · Answer 3 · 2014-11-22T03:32:34.527

remove is never called because remove in your <a> tag is referring to the native function remove (to be specific, HTMLAnchorElement.prototype.remove/ChildNode.remove) instead of yours. This is why only the text is removed, since ChildNode.remove targets its child.

To reference your function, do

<a href="#" onclick="window.remove();"></a>

Or even better:

var aContainer = document.createElement('div'),
    anchor = document.createElement("a");
aContainer.setAttribute('id', 'second');
a.innerText = "second";
a.addEventListener("click", remove);
aContainer.appendChild(a);
document.body.appendChild(aContainer);

Add and remove div from body in javascript

3 Answers3