The remove() and empty() methods

Trong một vài chương cuối, chúng ta đã làm việc với việc thêm thành phần mới vào trang nhưng tất nhiên jQuery cũng có thể loại bỏ chúng. Có hai phương thức: remove() và empty(). Phương thức remove() sẽ loại bỏ thành phần được chọn, trong khi empty() sẽ chỉ loại bỏ con của thành phần được chọn. Ví dụ sau sẽ minh họa sự khác biệt - đảm bảo nhấn vào đường dẫn theo thứ tự sau:

<a href="javascript:void(0);" onclick="$('#divTestArea1').empty();">empty() div</a>   
<a href="javascript:void(0);" onclick="$('#divTestArea1').remove();">remove() div</a>
<div id="divTestArea1" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
	<b>Bold text</b>
	<i>Italic text</i>
</div>

Đường dẫn đầu tiên dùng phương thức empty() trên thẻ div, loại bỏ toàn bộ thành phần con. Đường dẫn thứ hai loại bỏ toàn bộ thẻ div, bao gồm cả thành phần con. Rất đơn giản.

Phương thức remove() chứa cả tham số tùy chọn cho phép bạn giới hạn thành phần được loại bỏ dùng bất kỳ cú pháp lựa chọn jQuery nào. Bạn có thể làm tương tự đơn giản bằng cách chọn trong selector đầu tiên nhưng trong một vài tình huống, bạn có thể làm việc với một tập các thành phần đã được chọn. Hãy xem ví dụ sau:

<a href="javascript:void(0);" onclick="$('#divTestArea2 b').remove('.more');">remove() more bold</a>
<div id="divTestArea2" style="height: 100px; width: 300px; padding: 20px; border: 1px solid silver; background-color: #eee;">
	<b>Bold text</b><br />
	<b class="more">More bold text</b><br />
	<b class="more">Even more bold text</b><br />
</div>

Chúng ta bắt đầu bằng cách chọn thẻ bold trong div. Sau đó chúng ta dùng phương thức remove() trong các thành phần được chọn, đưa vào lựa chọn cho .more, đảm bảo rằng chúng ta chỉ chọ thành phần của class "more". Kết quả là chỉ có hai thành phần in đậm bị xóa đi.

Bạn có thể dùng các selector nâng cao. Hãy xem bài "Selectors" trong chuỗi bài giảng này.