Định nghĩa và sử dụng .removeClass() trong jQuery

.removeClass(): Loại bỏ thuộc tính (attr) class có bên trong thành phần.

Cấu trúc .removeClass() trong jQuery

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

.removeClass()

Loại bỏ tất cả thuộc tính class có trong thành phần.

$('div').removeClass();
.removeClass('Tên class')

Loại bỏ tên class có trong thành phần.

$('div').removeClass('test');

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

.removeClass(function(index,class){})

$('div').removeClass(function(){
    return $(this).prev().attr('class');
});

.removeClass()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').removeClass();
});
</script>
</head>

<body>
<div id="remove" class="test01 test02 test03">Thành phần div</div>
</body>
</html>

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

Ta thấy thuộc tính tất cả tên có trong thuộc tính class đã bị loại bỏ khỏi thành phần div.

.removeClass('Tên class')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').removeClass('test02');
});
</script>
</head>

<body>
<div id="remove" class="test01 test02 test03">Thành phần div</div>
</body>
</html>

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

Ta thấy thuộc tính class có tên test02 đã bị loại bỏ khỏi thành phần div.

.removeClass(function(index,class){})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('li').removeClass(function(i){
        if (i==0||i==3) {return "test"}
        else {return ""}
    });
});
</script>
<style>
.test { color: red; }
</style>
</head>

<body>
<ul>
<li class="test">Thành phần li 1</li>
<li class="test">Thành phần li 2</li>
<li class="test">Thành phần li 3</li>
<li class="test">Thành phần li 4</li>
<li class="test">Thành phần li 5</li>
</ul>
</body>
</html>

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

Ta thấy thành phần li có số thứ tự 1 (ứng với chỉ số n=0) và số thứ tự 4 (ứng với chỉ số n=3) đã bị loại bỏ thuộc tính class.

Viết câu trả lời

Drop Images

0 Bình luận