jQuery - empty và remove

empty và remove thường được dùng để xóa các phần tử trong jQuery. Tuy hai hàm này có cùng chung một hành động nhưng chúng có một chút khác biệt như sau:

• empty chỉ xóa các phần tử con của phần tử đang truy xuất.
• remove giống hàm empty nhưng bao gồm cả phần tử đang truy xuất và phần tử con.

Ví dụ ta có một thẻ ul như sau:

<ul id="test_ul">
 <li>lorem isum1</li>
 <li class="current">lorem isum2</li>
 <li>lorem isum3</li>
 <li>lorem isum4</li>
</ul>

Khi ta sử dụng:

• jQuery("#test_ul").empty() jQuery sẽ xóa toàn bộ nội dung của thẻ ul có id là test_ul nhưng vẫn giữ lại bản thân thẻ đó.

<ul id="test_ul">
</ul>

• jQuery("#test_ul").remove() jQuery sẽ xóa toàn bộ nội dung của thẻ ul có id là test_ul và xóa luôn cả thẻ ul test_ul. Tuy nhiên hàm remove sẽ trả về đối tượng mà nó vừa remove để chúng ta có khả năng lưu trữ và khôi phục lại khi cần

Demo ta có ô vuông bên trái chứa thẻ ul như trên và ô bên phải sẽ chứa giá trị trả về của lần lượt từng câu lệnh phía trên.

• lorem isum1
• lorem isum2
• lorem isum3
• lorem isum4

Code

<style>
.fly {
float:left;
display:inline;
}
.clean{
clear:both;
}
.current{
color:red;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("#butEmpty").click(function(){
        var rmvObj = jQuery("#test_ul").empty();
        jQuery("#showReturn").html(rmvObj);
    });
    jQuery("#butRemove").click(function(){
        var rmvObj = jQuery("#test_ul").remove();
        jQuery("#showReturn").html(rmvObj);
    });
});
</script>
<div>
    <div class="fly" style="width:200px;border:1px solid gray;height:120px;">
        <ul id="test_ul">
            <li>lorem isum1</li>
            <li>lorem isum2</li>
            <li>lorem isum3</li>
            <li>lorem isum4</li>
        </ul>
    </div>
    <div class="fly" style="margin:0px 5px;">
        <input type="button" value="empty" id="butEmpty"/><br/>
        <input type="button" value="remove" id="butRemove"/><br/>
    </div>
    <div class="fly" style="width:200px;border:1px solid gray;height:120px;" id="showReturn"></div>
    <div class="clean"></div>
</div>