.empty()

Định nghĩa và sử dụng

  • .empty(): Loại bỏ tất cả các thành phần bên trong kể cả text của thành phần chọn.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.empty()

$('p').empty();

.empty()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p {
    background-color: yellow;
    height: 50px;
    display: block;
    width: 100px;
}
</style>
<script>
$(function(){
    $('.tagEmpty').empty();
});
</script>
</head>

<body>
<p class="tagEmpty">Thành phần p sử dụng empty</p>
<p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy sau khi sử dụng .empty(), thành phần <p class="tagEmpty"> đã trở thành thành phần trống (empty).

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<p class="tagEmpty">Thành phần p sử dụng empty</p>
<p>Thành phần p</p>

<p class="tagEmpty"></p>
<p>Thành phần p</p>

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
p {
    background-color: yellow;
    height: 50px;
    display: block;
    width: 100px;
}
</style>
<script>
$(function(){
    $('button').click(function(){
        $('.tagEmpty').empty();
    });
});
</script>
</head>

<body>
<p class="tagEmpty">Thành phần p sử dụng empty</p>
<p>Thành phần p</p>
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy sau khi click button, phương thức .empty() đã được gọi, khi đó thành phần <p class="tagEmpty"> đã trở thành thành phần trống (empty).

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - khi click button

<p class="tagEmpty">Thành phần p sử dụng empty</p>
<p>Thành phần p</p>
<button>Click</button>

<p class="tagEmpty"></p>
<p>Thành phần p</p>
<button>Click</button>

.each()

.end()