how to remove the child node in js

Question

i have one parent node name orgdiv and one child node name newdiv. I am trying to remove the child node but its not working here is the code.

function ajxsrch(str) {
    if (str.length != 0) {
        if (count == 0) {
            var newdiv = document.createElement('DIV');
            newdiv.className = "newsearch";
            var orgdiv = document.getElementById("search");
            orgdiv.appendChild(newdiv);
            count = 1;
            alert("firstif");
        } else alert("first if else");
    } else {
        alert(str);
        count = 0;
        alert(count);
        newdiv.orgdiv.removeChild(newdiv);
    }
}

Define "it's not working." What is it doing? What is it *not* doing? What *should* it be doing? Are there any errors reported in the JavaScript console (have you looked at your browser's JavaScript console)? Have you checked the syntax (using [JS Lint](http://jslint.com/), for example? — David Thomas, Apr 29 '14 at 22:32
its not working means the third last lines in which i tried to remove the child is not doing its work — Ayyan Alvi, Apr 29 '14 at 22:34
In your browser run that code. Then press 'F12' and look at the error(s). — David Thomas, Apr 29 '14 at 22:37
But at `newdiv.orgdiv.removeChild(newdiv);` `newdiv` is `undefined` and if you look in the `console` you will see an error, something like `TypeError: Cannot read property 'orgdiv' of undefined ` — Xotic750, Apr 29 '14 at 22:38
@Xotic750 var newdiv = document.createElement('DIV'); this lines define the newdiv — Ayyan Alvi, Apr 29 '14 at 22:40
So you need to store a reference to `newdiv` and `orgdiv` or look those references up (`document.getElementById` or something similar) when entering that scope. — Xotic750, Apr 29 '14 at 22:49

score 0 · Accepted Answer · answered Apr 29 '14 at 23:59

There are a few issues with your approach, and your JavaScript console will typically assist in debugging most of these.

First of all, consider the objects newdiv and orgdiv. Inside your else block, you reference both of these, but they are not declared or initialized anywhere. There is a declaration in your if block, but of course that doesn't get run the second time this method is called. When the else block is executing, the if block is ignored altogether.

So you need to correct your object references:

function ajxsrch(str) {
    var orgdiv = document.getElementById("search");
    var newdiv = document.getElementById("newDivId"); // assuming div has an ID
    ...

Then of course, in your if block, you will initialize newdiv correctly since it doesn't exist yet.

newdiv = document.createElement('DIV');
newdiv.id = "newDivId";
newdiv.className = "newsearch";

Finally, when removing the element, you're incorrectly referencing the parent as a property of the child (newdiv.orgdiv.removeChild(newdiv);). Instead, just access the parent directly:

orgdiv.removeChild(newdiv);

So your final solution becomes:

function ajxsrch(str) {
    var orgdiv = document.getElementById("search");
    var newdiv = document.getElementById("newDivId");

    if (str.length != 0) {
        if (count == 0) {
            newdiv = document.createElement('DIV');
            newdiv.id = "newDivId";
            newdiv.className = "newsearch";

            orgdiv.appendChild(newdiv);
            count = 1;
            alert("firstif");
        } else alert("first if else");
    } else {
        alert(str);
        count = 0;
        alert(count);
        orgdiv.removeChild(newdiv);
    }
}

how to remove the child node in js

1 Answers1