Skip to Content | Skip to Navigation


dojo.empty

Project owner:Peter Higgins
since:V1.0

Empty the contents of a DOM element. dojo.empty deletes all children but keeps the node there.

Introduction

dojo.empty safely removes all children of the node.

Since Dojo 1.7, dojo.empty is exposed via the empty method of the dojo/dom-construct module. An alias is kept in dojo/_base/html for backward-compatibility.

Usage

Dojo 1.7+ (AMD)

When using AMD format in a fully baseless application, empty is accessed from the dojo/dom-construct module.

require(["dojo/dom-construct"], function(domConstruct){
  // Empty node's children byId:
  domConstruct.empty("someId");
});

Alternatively, you can load dojo base in AMD style and continue using dojo.empty in the define or require callback:

require(["dojo"], function(dojo){
  // Empty node's children byId:
  dojo.empty("someId");
});

Dojo < 1.7

// Empty node's children byId:
dojo.empty("someId");

This function only works with DomNodes, and returns nothing.

Examples

Empty a single node

Empty a DomNode
<script type="text/javascript">
dojo.require("dijit.form.Button");

dojo.ready(function(){
    // Create a button programmatically:
    var button = new dijit.form.Button({
        label: "Empty TestNode1",
        onClick: function(){
            // Empty TestNode1:
            dojo.empty("testnode1");
            dojo.byId("result1").innerHTML = "TestNode1 has been emptied.";
        }
    }, "progButtonNode");

});
</script>

Some DomNodes

<div id="testnode1">TestNode 1</div>
<button id="progButtonNode" type="button"></button>
<div id="result1"></div>

Empty all nodes in a list by reference

<style type="text/css">
.green { color: white; min-width: 30px; min-height: 30px;
    border: 1px #4d4d4d solid; margin-top: 4px; margin-right: 5px;
    float: left; background-color: green; padding: 2px }
.red { color: white; min-width: 30px; min-height: 30px;
    border: 1px #4d4d4d solid; margin-top: 4px; margin-right: 5px;
    float: left; background-color: red; padding: 2px }
#panel { clear: both }
</style>

Empty all Nodes in a list by reference

<script type="text/javascript">
dojo.require("dijit.form.Button");

dojo.ready(function(){
    // Create a button programmatically:
    var button2 = new dijit.form.Button({
        label: "Empty all red nodes",
        onClick: function(){
            // Empty all nodes in a list by reference:
            dojo.query(".red").forEach(dojo.empty);
            dojo.byId("result2").innerHTML = "All red nodes were emptied.";
        }
    }, "progButtonNode2");

});
</script>

Some DomNodes

<div class="green">greenNode</div>
<div class="green">greenNode</div>
<div class="red">redNode</div>
<div class="green">greenNode</div>
<div class="green">greenNode</div>
<div class="red">redNode</div>
<div class="red">redNode</div>
<div class="green">greenNode</div>
<div class="green">greenNode</div>
<div class="red">redNode</div>
<div class="red">redNode</div>
<div class="red">redNode</div>
<div class="green">greenNode</div>
<div class="green">greenNode</div>
<div class="red">redNode</div>

<div id="panel">
    <button id="progButtonNode2" type="button"></button>
    <div id="result2"></div>
</div>

API Info

full API:http://dojotoolkit.org/api/dojo/empty
summary:safely removes all children of the node.

Parameters

Signature

dojo.empty( /* DOMNode|String */ node)

Overview

  • node DOMNode|String

    a reference to a DOM node or an id.

Examples

Destroy node’s children byId:

dojo.empty("someId");

Destroy all nodes’ children in a list by reference:

dojo.query(".someNode").forEach(dojo.empty);