dojo.destroy¶
| Project owner: | Peter Higgins |
|---|---|
| Available: | since V1.3 |
Contents
Destroys a DOM element. dojo.destroy deletes all children and the node itself.
Introduction¶
dojo.destroy removes a node from its parent, clobbering it and all of its children.
Usage¶
<script type="text/javascript">
// Destroy a node byId:
dojo.destroy("someId");
</script>
This function only works with DomNodes, and returns nothing.
| Parameter | Type | Description |
|---|---|---|
| node | String|DomNode | A String ID or DomNode reference of the element to be destroyed. |
Examples¶
Destroy a single node¶
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function(){
// Create a button programmatically:
var button = new dijit.form.Button({
label: "Destroy TestNode1",
onClick: function(){
// Destroy TestNode1:
dojo.destroy("testnode1");
dojo.byId("result1").innerHTML = "TestNode1 was destroyed.";
}
}, "progButtonNode");
});
</script><div id="testnode1">TestNode 1</div> <button id="progButtonNode" type="button"></button> <div id="result1"></div>
Destroy all nodes in a list by reference¶
<style type="text/css">
.stay { width: 30px; height: 30px; border: 1px #4d4d4d solid; margin-top: 4px; margin-right: 5px; float: left; background-color: green }
.go { width: 30px; height: 30px; border: 1px #4d4d4d solid; margin-top: 4px; margin-right: 5px; float: left; background-color: red }
</style><script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.addOnLoad(function(){
// Create a button programmatically:
var button2 = new dijit.form.Button({
label: "Destroy all red nodes",
onClick: function(){
// Destroy all nodes in a list by reference:
dojo.query(".go").forEach(dojo.destroy);
dojo.byId("result2").innerHTML = "All red nodes were destroyed.";
}
}, "progButtonNode2");
});
</script><div class="stay"> </div> <div class="stay"> </div> <div class="go"> </div> <div class="stay"> </div> <div class="go"> </div> <div class="stay"> </div> <div class="stay"> </div> <div class="go"> </div> <div class="go"> </div> <div class="stay"> </div> <div class="stay"> </div> <div class="go"> </div> <button id="progButtonNode2" type="button"></button> <div id="result2"></div>