JQuery / JavaScript का उपयोग करके सभी CSS कक्षाएं कैसे निकालें?


778

$("#item").removeClass()प्रत्येक एकल वर्ग के लिए व्यक्तिगत रूप से कॉल करने के बजाय एक तत्व हो सकता है, क्या कोई एकल फ़ंक्शन है जिसे कहा जा सकता है जो दिए गए तत्व से सभी सीएसएस वर्गों को हटा देता है?

JQuery और कच्चे जावास्क्रिप्ट दोनों काम करेंगे।

जवाबों:


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

removeClassकिसी भी पैरामीटर के साथ कॉल करने से आइटम की सभी कक्षाएं हट जाएंगी।


आप भी उपयोग कर सकते हैं (लेकिन जरूरी नहीं कि अनुशंसित हो, सही तरीका ऊपर वाला है):

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

यदि आपके पास jQuery नहीं है, तो यह आपका एकमात्र विकल्प होगा:

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

7
अब attr()संस्करण नहीं होना चाहिए prop()?
माइक

7
हटाने को हटाने () मापदंडों के बिना अब संस्करण 1.11.1 में काम करने के लिए प्रतीत नहीं होता है
विंसेंट

1
@Vincent JQuery में पेश किए गए बग की तरह लगता है क्योंकि उनके प्रलेखन में स्पष्ट रूप से यह कहा गया है: If a class name is included as a parameter, then only that class will be removed from the set of matched elements. If no class names are specified in the parameter, all classes will be removed. api.jquery.com/removeclass
AtheistP3ace

हां, मुझे यह भी संदेह है कि यह एक बग है, और डिजाइन द्वारा नहीं। इस बीच, निम्नलिखित शुद्ध जावास्क्रिप्ट ठीक काम करती है। document.getElementById ( "आइटम") removeAttribute ( "वर्ग")।
विंसेंट

1
JQuery UI 1.9 के साथ एक समस्या है। यदि removeClass () ने काम को हटाने का उपयोग नहीं किया है ('क्लास')
मिलाद

119

यदि कुछ विशिष्ट निर्दिष्ट नहीं किया गया है, तो सभी वर्गों को हटाने के लिए डिफ़ॉल्ट हटाएं (हटाएं) डिफ़ॉल्ट नहीं है? इसलिए

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

अपने दम पर करेंगे ...


3
हाँ: "सभी या निर्दिष्ट वर्ग (एस) को हटाए गए तत्वों के समूह से निकालता है।"
da5id

5
अब इसे ठीक से प्रलेखित किया गया है: यदि पैरामीटर में कोई वर्ग नाम निर्दिष्ट नहीं किया गया है, तो सभी वर्गों को हटा दिया जाएगा।
उपयोगकर्ता

17

बस (कुछ नहीं) classNameके लिए वास्तविक DOM तत्व की विशेषता सेट करें ''

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

संपादित करें: अन्य लोगों ने कहा है कि सिर्फ कॉलिंग removeClassकाम करता है - मैंने Google JQuery के खेल के मैदान के साथ यह परीक्षण किया: http://savedbythegoog.appspot.com/?id=ag5zYXZZZGJ5dGhlZ29vZZZISCxIJU2FWZDb2RlGIS61gEM ... और यह काम करता है। तो आप इसे इस तरह से भी कर सकते हैं:

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

13

बेशक।

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

11

हे, एक ऐसे ही उत्तर की खोज में आया था। फिर इसने मुझे मारा।

विशिष्ट कक्षाएं निकालें

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

यदि तत्व में वर्ग = "वर्ग दूसरे-वर्ग" हैं, तो कहें



5

आप बस कोशिश कर सकते हैं

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

यदि आपको कक्षा नाम के बिना उस तत्व तक पहुंचना है, उदाहरण के लिए आपको एक नया वर्ग नाम जोड़ना होगा, तो आप ऐसा कर सकते हैं:

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

मैं एक html बिल्डर में क्लास को हटाने और जोड़ने के लिए अपने फंक्शन में उस फंक्शन का इस्तेमाल करता हूँ। सौभाग्य।


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

"एल्म" में अब कोई क्लास अटर वाइल मौजूद नहीं है।


इसी से मेरा काम बना है। removeClass();मेरे लिए काम नहीं किया।
kneidels

3

मुझे देशी 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");


2

चूँकि jQuery के सभी संस्करण समान नहीं बने हैं, आप उसी मुद्दे पर चल सकते हैं जो मैंने किया था जिसका अर्थ है $ ("# आइटम") को कॉल करना। removeClass (); वास्तव में कक्षा को नहीं हटाता है। (शायद एक बग)

एक अधिक विश्वसनीय तरीका केवल कच्चे जावास्क्रिप्ट का उपयोग करना है और पूरी तरह से वर्ग विशेषता को हटा देना है।

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

1

के साथ प्रयास करें removeClass

उदाहरण के लिए :

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>


1

आइए इस उदाहरण का उपयोग करें। हो सकता है कि आप चाहते हैं कि आपकी वेबसाइट के उपयोगकर्ता को पता है कि कोई फ़ील्ड मान्य है या उसे फ़ील्ड की पृष्ठभूमि का रंग बदलकर ध्यान देने की आवश्यकता है। यदि उपयोगकर्ता रीसेट करता है, तो आपका कोड केवल उन फ़ील्ड्स को रीसेट कर सकता है जिनके पास डेटा है और आपके पृष्ठ पर हर दूसरे फ़ील्ड के माध्यम से लूप से परेशान नहीं है।

यह jQuery फ़िल्टर वर्ग "हाइलाइटक्रिटिया" को केवल इनपुट के लिए हटा देगा या उन फ़ील्ड का चयन करेगा जिनके पास यह वर्ग है।

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

-2

मेरा भी ऐसा ही मुद्दा था। मेरे मामले में अक्षम तत्वों पर लागू किया गया था कि एस्पनेटडिसिबल क्लास और सभी अक्षम नियंत्रणों में गलत रंग थे। इसलिए, मैंने इस वर्ग को हर तत्व / नियंत्रण पर अभ्यस्त करने के लिए मैं अभ्यस्त और सब कुछ काम करता हूं और अब बहुत अच्छा लग रहा है।

यह aspNetDisabled वर्ग को हटाने के लिए मेरा कोड है:

$(document).ready(function () {

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

}); 
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.