- MooTools 1.3 Cookbook
- Jay Larry G. Johnston
- 538字
- 2021-04-02 19:07:09
Removing an element by ID
Ready to give an element the axe? Send it to "File 13" by removing it from the page.
Getting ready
There are only four things that can be done with data. It can be Created, Read, Updated, and Deleted: CRUD. It was once thought that the alternative to this was to Create, Read, Alter, and Purge data, but we then realized that this alternative idea was CRAP.
Be prepared for two examples in one. The first shows a novice approach to handling actions in JavaScript. Then the second shows an industry best-practice approach, one that is less intrusive into the DOM.
How to do it...
In this exercise, we delete, or purge an element from the HTML DOM by use of the destroy() method.
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<p id="s1">The Fox jumped over the lazy dog.
<a href="#"
onclick="javascript:delete_by_id('s1');">
<small>DELETE THIS CRUD</small></a>
</p>
<p id="s2">Jack and Jill went up one hill and down another.
<a href="#"
onclick="javascript:delete_by_id('s2');">
<small>DELETE THIS CRUD</small></a>
</p>
<p id="s3">By any other name, this rose is still a rose.
<a href="#"
onclick="javascript:delete_by_id('s3');">
<small>DELETE THIS CRUD</small></a>
</p>
<p id="s4">The superhero towered high above all others.
<a href="#"
onclick="javascript:delete_by_id('s4');">
<small>DELETE THIS CRUD</small></a>
</p>
<noscript>JavaScript is disabled.</noscript>
<script type="text/javascript">
function delete_by_id(id) {
// when we know the id, it's very easy to get rid of it
$(id).destroy();
if ($$('p').length===0) {
alert('Eegads! We've deleted the entire universe! Undo!');
location.href="?undo";
}
}
</script>
How it works...
Removing an object by ID is pretty simple; we just use the syntax $(my_element).destroy(). If we wish to only remove the contents of an object we use $(my_element).empty(). We may also use dispose() which will return the element for client-side storage. That way it can be injected back into the DOM later if the need arises.
There's more...
Note
Unobtrusive JavaScript is a best industry practice. We always notify our users that they may have JavaScript disabled as one small step in writing unobtrusive JavaScript. The javascript: keyword included inside an href attribute may be commonplace; but instead, let us help our users, by attaching a listener to fire the appropriate function and keep our JavaScript unobtrusive.
One solution for attaching a listener in this recipe is completely removing the A tags and adding ID attributes to the SMALL tags to create a listener on the element that will respond, unobtrusively to the click event.
<script type="text/javascript" src="mootools-1.3.0.js"></script>
</head>
<body>
<p id="s1">The Fox jumped over the lazy dog.
<small id="d1">DELETE THIS CRUD</small>
</p>
<p id="s2">Jack and Jill went up one hill and down another.
<small id="d2">DELETE THIS CRUD</small>
</p>
<p id="s3">By any other name, this rose is still a rose.
<small id="d3">DELETE THIS CRUD</small>
</p>
<p id="s4">The superhero towered high above all others.
<small id="d4">DELETE THIS CRUD</small>
</p>
<script type="text/javascript">
// remember that double dollar takes a css selector
$$('small').addEvent('click',function() {
// the IDs are conveniently congruent
var my_id_2_delete = this.id.replace('d','s');
delete_by_id(my_id_2_delete);
});
function delete_by_id(id) {
// when we know the id, it's very easy to get rid of it
$(id).destroy();
}
</script>
<!-- our delete links should look like links, yay! -->
<style type="text/css">
small { cursor: pointer; color: #00F; }
</style>
When using unobtrusive JavaScript, it will often be left to us to properly style elements. In this unobtrusive example, the SMALL elements are styled to appear as links.