your programing

jQuery / JavaScript를 사용하여 모든 CSS 클래스를 제거하는 방법은 무엇입니까?

lovepro 2020. 9. 29. 08:20
반응형

jQuery / JavaScript를 사용하여 모든 CSS 클래스를 제거하는 방법은 무엇입니까?


$("#item").removeClass()요소가 가질 수있는 모든 단일 클래스 를 개별적으로 호출하는 대신 지정된 요소에서 모든 CSS 클래스를 제거하는 호출 할 수있는 단일 함수가 있습니까?

jQuery와 원시 JavaScript가 모두 작동합니다.


$("#item").removeClass();

removeClass매개 변수없이 호출 하면 항목의 모든 클래스가 제거됩니다.


다음을 사용할 수도 있습니다 (반드시 권장되는 것은 아니지만 올바른 방법은 위의 방법입니다).

$("#item").removeAttr('class');
$("#item").attr('class', '');
$('#item')[0].className = '';

jQuery가 없다면 이것은 거의 유일한 옵션이 될 것입니다.

document.getElementById('item').className = '';

잠시만 요, removeClass ()가 특정 사항이 지정되지 않은 경우 모든 클래스를 기본적으로 제거하지 않습니까? 그래서

$("#item").removeClass();

스스로 할 것입니다 ...


물론이야.

$('#item')[0].className = '';
// or
document.getElementById('item').className = '';

className실제 DOM 요소 속성을 ''(없음)으로 설정하기 만하면됩니다 .

$('#item')[0].className = ''; // the real DOM element is at [0]

편집 : 다른 사람들은 단지 removeClass작품을 호출한다고 말했습니다 -나는 이것을 Google JQuery Playground로 테스트했습니다 : http://savedbythegoog.appspot.com/?id=ag5zYXZlZGJ5dGhlZ29vZ3ISCxIJU2F2ZWRDb2RlGIS61gEM ... 따라서 다음과 같이 할 수도 있습니다.

$("#item").removeClass();

가장 짧은 방법

$('#item').removeAttr('class').attr('class', '');

헤, 비슷한 대답을 찾고 왔습니다. 그리고 그것은 나를 때렸다.

특정 클래스 제거

$('.class').removeClass('class');

요소에 class = "class another-class"가 있는지 말하십시오.


$('#elm').removeAttr('class');

더 이상 클래스 속성이 "elm"에 표시되지 않습니다.


시도 할 수 있습니다.

$(document).ready(function() {
   $('body').find('#item').removeClass();
});

예를 들어 새 클래스 이름을 추가해야하는 경우와 같이 클래스 이름없이 해당 요소에 액세스해야하는 경우 다음을 수행 할 수 있습니다.

$(document).ready(function() {
   $('body').find('#item').removeClass().addClass('class-name');
});

내 프로젝트에서이 기능을 사용하여 html 빌더에서 클래스를 제거하고 추가합니다. 행운을 빕니다.


나는 네이티브 js를 사용하는 것을 좋아합니다. 믿거 나 말거나!

1.

// remove all items all class  
const items = document.querySelectorAll('item');
for (let i = 0; i < items.length; i++) {
    items[i].className = '';
}

2.

// only remove all class of first item
const item1 = document.querySelector('item');
item1.className = '';

jQuery 방법

  1. $("#item").removeClass();

  2. $("#item").removeClass("class1 ... classn");


Since not all versions of jQuery are created equal, you may run into the same issue I did which means calling $("#item").removeClass(); does not actually remove the class. (Probably a bug)

A more reliable method is to simply use raw JavaScript and remove the class attribute altogether.

document.getElementById("item").removeAttribute("class");

try with removeClass

For instance:

var nameClass=document.getElementsByClassName("clase1");
console.log("after", nameClass[0]);
$(".clase1").removeClass();
var nameClass=document.getElementsByClassName("clase1");
console.log("before", nameClass[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clase1">I am Div with class="clase1"</div>


Let's use this example. Maybe you want the user of your website to know a field is valid or it needs attention by changing the background color of the field. If the user hits reset then your code should only reset the fields that have data and not bother to loop through every other field on your page.

This jQuery filter will remove the class "highlightCriteria" only for the input or select fields that have this class.

$form.find('input,select').filter(function () {
    if((!!this.value) && (!!this.name)) {
        $("#"+this.id).removeClass("highlightCriteria");
    }
});

I had similar issue. In my case on disabled elements was applied that aspNetDisabled class and all disabled controls had wrong colors. So, I used jquery to remove this class on every element/control I wont and everything works and looks great now.

This is my code for removing aspNetDisabled class:

$(document).ready(function () {

    $("span").removeClass("aspNetDisabled");
    $("select").removeClass("aspNetDisabled");
    $("input").removeClass("aspNetDisabled");

}); 

참고URL : https://stackoverflow.com/questions/1424981/how-to-remove-all-css-classes-using-jquery-javascript

반응형