官术网_书友最值得收藏!

首頁 >

MooTools 1.3 Cookbook

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.

See also

There are a lot of great articles on unobtrusive JavaScript that can be dug up using any good search engine. When we are familiar with those, we are not only going to write code that works better, but also write code that is easier to maintain!

主站蜘蛛池模板： 赞皇县| 永州市| 正宁县| 永康市| 靖边县| 吐鲁番市| 满洲里市| 黄龙县| 通渭县| 铜鼓县| 突泉县| 乐山市| 天等县| 金塔县| 巴彦淖尔市| 彩票| 德格县| 岱山县| 伊川县| 凤翔县| 宾阳县| 呼和浩特市| 宜阳县| 务川| 上高县| 延津县| 潞城市| 宜兴市| 太康县| 西安市| 五家渠市| 阳高县| 台东市| 南涧| 曲麻莱县| 建阳市| 平度市| 霸州市| 渭源县| 柳州市| 仪征市|