.removeClass()

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

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

Cấu trúc

  • Đã đượ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.

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

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

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

<div id="remove" class="">Thành phần div</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.

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

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

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

<div id="remove" class="test01 test03">Thành phần div</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.

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

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

<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>

<ul>
<li class="">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="">Thành phần li 4</li>
<li class="test">Thành phần li 5</li>
</ul>

THÔNG BÁO LỖI