.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

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="https://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="https://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="https://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>

.removeAttr()

.removeData()