Người Viết : ViKiMi Editor

Sử dụng phương thức Remove() và Empty() để xoá các phần tử HTML, Nội dung Website
Khi bạn quyết định thêm các phần tử HTML thì sự trái ngược lại là bạn cũng có thể quyết định xoá các phần tử HTML khỏi một Website. Việc xoá một phần tử HTML khỏi một Website cho phép bạn có thể làm chủ hoàn toàn một cách linh hoạt trong việc Thêm + Xoá phần tử HTML khỏi trang Web. Không giống CSS display : none, Việc xoá phần tử là vĩnh viễn.
Thư viện jQuery cho phép bạn thực hiện xoá cách dễ dàng các phần tử HTML khỏi trang Web.
Lợi ích của việc xoá các phần tử khỏi một Website :
+ Loại bỏ các phần tử không cần thiết
+ Tạo một bố cục phù hợp cho các đối tượng truy cập
+ Kết hợp giữa Thêm & Xoá giúp cho thao tác trên Website tốt hơn
+ Tạo các thiết kế linh hoạt dựa vào thuật toán cá nhân Etc …
CÁC PHƯƠNG THỨC XOÁ PHẦN TỬ VÀ NỘI DUNG
+ Remove ()
Phương thức này cho phép XOÁ các phần tử được chọn ( Và các phần tử con của Nó )
+ Empty ()
Phương thức này cho phép XOÁ các phần tử con khỏi phần tử đã chọn ( Không xoá phần tử đã chọn )
A ] Phương thức Remove()
Phương thức này được sử dụng dễ dàng để :
Xoá các phần tử được chọn + Các phần tử con của nó
CÚ PHÁP :
$( SELECTOR ). remove( )
$( SELECTOR ). remove( Param1, Param2, …, ParamN )
+ TH1 : Phương thức này cho phép không truyền tham số
Điều này cho phép bạn Remove tất cả các phần tử SELECTOR tìm được + Các phần tử Con
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1">
Phần tử Div 1.
<p>Đoạn văn bản 1</p>
<p>Đoạn văn bản 2</p>
<p>Đoạn văn bản 3</p>
</div>
<h1>Phương Thức Reomve cho phép Xoá Phần Tử được chọn + Các Phần Tử Con của nó.</h1>
<button> Phương Thức Remove </button>
</body>
</html>
+ TH2 : Phương thức này cho phép truyền các tham số
Các tham số này là các Class hoặc Id giúp tăng khả năng tìm phần tử đúng yêu cầu lọc của bạn.
Điều này cho phép bạn xoá các phần tử đã chọn + Các phần tử con của nó dựa trên các tham số truyền vào
EXAMPLE ::
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").remove("#div2, .div3");
});
});
</script>
<style>
.div3 {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
<h2>Phần tử Div 1</h2>
<p>Đoạn Văn Bản 1.</p>
<div id="div2">Phần tử Div 2.
<p>Đoạn Văn Bản 2.</p>
</div>
<div class="div3">Phần tử Div 3.</p>
</div>
<button> Phương Thức Remove với tham số #div2 , .div3 </button>
</body>
</html>
HÌNH Ảnh Kết Quả :
TRƯỚC :

SAU KHI REMOVE:

B ] PHƯƠNG THỨC EMPTY()
Phương thức này được sử dụng dễ dàng để :
Xoá Các phần tử con khỏi phần tử đã chọn $( SELECTOR )
CÚ PHÁP :
$( SELECTOR ). empty( )
EXAMPLE : Sử dụng xoá các phần tử con khỏi phần tử đã chọn
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div2").empty();
});
});
</script>
<style>
#div2 {
color: red;
height:100px;
width:300px;
padding: 1%;
border:1px solid black;
background-color:yellow;
}
</style>
</head>
<body>
<div id="div1">
<h2>Tiêu Đề Div 1</h2>
<p>Đoạn Văn Bản 1.</p>
<div id="div2">
<h4>Tiêu Đề Div 2</h4>
<p>Đoạn Văn Bản 2.</p>
</div>
<div class="div3">
<h4>Tiêu Đề Div 3</h4>
<p>Đoạn Văn Bản 3.</p>
</p>
</div>
<h2>Thực Hiện Xoá Phần Tử Con Của #div2 : Tiêu Đề Div 2 + Đoạn Văn Bản 2.</h2>
<h2>Tuy nhiên, không xoá Phần Tử #div2.</h2>
<button> Phương Thức Empty </button>
</body>
</html>
HÌNH Ảnh Kết Quả :
TRƯỚC :

SAU KHI REMOVE:

Những phương thức giúp bạn thực hiện xoá Các phần tử và nội dung trên Website bổ trợ nhiều khi cần thiết. Việc kết hợp thuật toán để sử dụng hiệu quả các Phương thức này sẽ đem lại hiệu quả cao. Website khi có thể chủ động Thêm + Xoá Các phần tử HTML và nội dung theo các ngữ cảnh khác nhau sẽ đem lại một Website có tính động cao hơn và tương tác tốt.
+ Phương thức Remove + Empty thật hữu ích