creating and removing element in javascript

Question

function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    var div = this.getElementById(makeDivId(this.id));

    if (div) {
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        this.appendChild(div);
    }
}




<label id="1" onclick="labelOnClick()" > BROWSER </label>
<label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label>

In the above example, I'm trying to create a div element when a label is clicked and remove the created div element when the label is clicked again, but it's not working.

Answer 1

You have several problems in your code:

• When assigning event handlers inline (label onclick="...") inside the event handler function this will point to the global object (window). You can pass this as an argument to the function.

• Certain browsers will fail when assigning the result of getElementById() to a variable if no element is found (someone correct me if I'm wrong).

Something like this would work:

<script>
function labelOnClick (me) {
    var makeDivId=function (id) {
        return id + "_div";
    };
    var div;

    if (document.getElementById(makeDivId(me.id))) {
        div=document.getElementById(makeDivId(me.id));
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(me.id);

        me.appendChild(div);
    }
}
</script>

<label id="1" onclick="labelOnClick(this)" > BROWSER </label>
<label id="2" onclick="labelOnClick(this)"> GAMING CONSOLE </label>

jsFiddle Demo

Answer 2

My suggestion would be to not add the div using the javascript, but to change the div tag's visibility style property on click..

function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    //var div = this.getElementById(makeDivId(this.id));

    if (document.getElementById("divID").style.visibility == "visible") {
        document.getElementById("divID").style.visibility = "hidden";          
    } else {
        document.getElementById("divID").style.visibility = "hidden";  
    }
}

    <label id="1" onclick="labelOnClick()" > BROWSER </label>
    <label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label> 

Answer 3

You are trying to use the "this" keyword in place of "document", which does not work since "this" is pointing to the labelOnClick function.

function labelOnClick(e)
{
    function makeDivId(id)
    {
        return id + "_div";
    };

    var div = document.getElementById(makeDivId(this.id));

    if (div)
    {
        div.parentNode.removeChild(div);
    }
    else
    {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        var element = e.target;
        element.parentNode.insertBefore(div, element.nextSibling);
    }
}


<label id="1" onclick="labelOnClick(event)" > BROWSER </label>
<label id="2" onclick="labelOnClick(event)"> GAMING CONSOLE </label>

I wrote this assuming you are using something that supports the "target" property of the event object (e.g. not internet explorer). If you need cross browser support, you can do it manually or use a framework like jQuery or Prototype.

The way the original code was written, I assumed that you wanted a div per label and I guessed at the positioning (immediately following the label).