SOS

Shane O'Sullivan's technical blog… really ties the room together

Deleting DOM nodes with Dojo

Posted by Shane O'Sullivan on January 2, 2009

This is a quick and simple tip for deleting multiple DOM nodes in JavaScript using the Dojo Ajax Toolkit.

A common pattern in non-trivial Ajax applications is the need to delete many nodes that may or may not have been created.  The code to do this without Dojo (or a similar library such as jQuery) would look something like the following code (assuming nodes are identified by ID):

var nodeIDs = ["node1", "node2", "node3"];
for (var i = 0; i < nodeIDs.length; i++) {
 var node = document.getElementById(nodeIDs[i]);
 // Verify that the node actually exists, otherwise an error occurs
 if (node) {
  node.parentNode.removeChild(node);
 }
}

This is of course a bit messy.   It would be infinitely messier if you needed to match nodes not by ID, but by another method such as by class name, relative position to it’s parent or sibiling nodes etc.

To achieve the same in Dojo, use this simple code.

var nodeIDs = ["#node1", "#node2", "#node3"];
dojo.query(nodeIDs.join(",")).orphan();

Update: There is a bug in Dojo that means that if the node with ID “node2″ does not exist, “node3″ will not be deleted.  (Thanks to Pete Higgins for letting me know). Instead use the following code:
dojo.forEach(arr, "dojo.query(item).orphan();");

Very simple, and much smaller and cleaner than the previous example.  It also scales very well to match nodes using CSS selectors, not just by ID.  For example, to delete nodes both by ID and class name, use the following code.

var nodeIDs = ["#node1", "#node2", ".className1", ".parentClass .childClass"];
dojo.query(nodeIDs.join(",")).orphan();

Update: as with the first example, replace the second line with:
dojo.forEach(arr, "dojo.query(item).orphan();");

For more info on the cool features of dojo.query, see the docs at http://docs.dojocampus.org/dojo/query .

About these ads

13 Responses to “Deleting DOM nodes with Dojo”

  1. how about:

    dojo.forEach([“node1″,”node2″,”node3″], dojo._destroyElement);

    or in 1.3:

    dojo.forEach([“node1″,”node2″,”node3″], dojo.destroy);

    (clearly it won’t work in the class-name-looking scenario though)

  2. Both good solutions Pete, but my one is a better general purpose solution I think, since as you point out, you can use the full CSS selector syntax.

    A combined solution could be:

    // v1.2
    dojo.query(nodeIDs.join(“,”)).forEach(“dojo._destroyElement(item)”);

    // v1.3
    dojo.query(nodeIDs.join(“,”)).forEach(“dojo.destroy(item)”);

  3. or

    dojo.forEach(dojo.query(nodeIDs.join), dojo._destroyElement);

  4. okay I win:

    dojo.query(nodeIDs.join(“,”)).forEach(dojo.destory);

  5. if it weren’t for the error your code would throw, I’d agree :-)

    dojo.query(nodeIDs.join(”,”)).forEach(dojo.destroy);

    I WIN!! ;-)

  6. it is a little known fact dojo.destory is an undocumented alias to dojo._destroyElement. Always has been. I win. (/me jokes)

  7. okay, to work around any potential unexpected behavior as a result of #7125 (open as of 1.3):

    dojo.forEach(nodesIds, function(sel){ dojo.query(sel).forEach(dojo.destroy); });

  8. Also, dojo._destroyElement does not do a null check, so the code in comments #4 and #5 would break if any of the nodes didn’t exist. Perhaps the dojo.destroy method in 1.3 will do a null check, but if not, it won’t work either.

    I’ve updated the post with a new method of deleting nodes, based on Pete’s information that there is a bug in Dojo that means if searching for “#node1, #node2″ and “node1″ doesn’t exist, “node2″ isn’t found and removed.

    The updated code gets around this bug.

  9. Nathan Toone said

    I want in…

    Isn’t there an error in your “original” (non-Dojo) code?

    You said:

    if (node) {
    node.parentNode.removeChild(node);
    }

    But it probably should be:

    if (node && node.parentNode) {
    node.parentNode.removeChild(node);
    }
    :)

  10. while(n.lastChild){ n.removeChild(n.lastChild); } is faster to empty a node. removeChild however doesn’t destroy, just leaves them in limbo. But i’ve been wrong before …

  11. I saw your page on Bing. I will certainly be bookmarking this site so I can stay updated on the latest developments. _________________________________________________________________________ Quit Smoking

  12. How do u delete class dojo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 533 other followers

%d bloggers like this: