Home > Developer > JavaScript
Example of removeClass () method usage in jQuery, jqueryremoveclass
This document describes how to use the removeClass () method in jQuery. Share it with you for your reference. The specific analysis is as follows:
This method deletes one or more classes from the matching element.
There are several Syntax structures based on different method parameters.
Syntax structure 1:
Method has no parameters. Removes all classes of matching elements.
Copy codeThe Code is as follows: $ (selector). removeClass ()
Instance code:
The code can delete all css classes of the div.
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> removeClass () function-helper's house </title>
<Style type = "text/css">
. Font {
Font-size: 18px;
Color: yellow
}
. Bg {
Background: #336;
}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). removeClass ();
});
})
</Script>
</Head>
<Body>
<Div class = "font bg"> welcome </div>
<Button> click to view results </button>
</Body>
</Html>
Syntax structure 2:
Removes the specified class from the matching element.
Copy codeThe Code is as follows: $ (selector). removeClass (class)
| Parameters | Description |
| Class | One or more CSS class names to be deleted. Class names are separated by spaces. |
Instance code:
Instance 1:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> removeClass () function-helper's house </title>
<Style type = "text/css">
. Font {
Font-size: 18px;
Color: yellow
}
. Bg {background: #336 ;}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). removeClass ("font ");
});
})
</Script>
</Head>
<Body>
<Div class = "font bg"> welcome </div>
<Button> click to view results </button>
</Body>
</Html>
Removes a specified class.
Example 2:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> removeClass () function-helper's house </title>
<Style type = "text/css">
. Font {
Font-size: 18px;
Color: yellow
}
. Bg {background: #336 ;}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). removeClass ("font bg ");
});
})
</Script>
</Head>
<Body>
<Div class = "font bg"> welcome </div>
<Button> click to view results </button>
</Body>
</Html>
Remove two CSS classes, separated by spaces.
Syntax structure 3:
Copy codeThe Code is as follows: $ (selector). removeClass (function (index, oldclass ))
The name of the class to be removed.
Parameter List:
| Parameters | Description |
| Function (index, oldclass) | Method returns one or more class names to be removed separated by spaces. Index-(optional) specifies the index position of the selector. Oldclass-(optional) accept the original class value of the selector. |
Instance code:
Instance 1:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> removeClass () function-helper's house </title>
<Style type = "text/css">
. Font {
Font-size: 18px;
Color: yellow
}
. Bg {background: #336 ;}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). removeClass (function (){
Return "font"
});
});
})
</Script>
</Head>
<Body>
<Div class = "font bg"> welcome </div>
<Button> click to view results </button>
</Body>
</Html>
Using a function as a parameter, the function returns the name of the CSS class to be deleted.
Example 2:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Meta name = "author" content = "http://www.bkjia.com/"/>
<Title> removeClass () function-helper's house </title>
<Style type = "text/css">
. Font {
Font-size: 18px;
Color: yellow
}
. Bg {background: #336 ;}
</Style>
<Script type = "text/javascript" src = "mytest/jQuery/jquery-1.8.3.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("Button"). click (function (){
$ ("Div"). removeClass (function (){
Return "font bg"
});
});
})
</Script>
</Head>
<Body>
<Div class = "font bg"> welcome </div>
<Button> click to view results </button>
</Body>
</Html>
Use a function as a parameter. The function returns two CSS class names to be deleted, separated by spaces.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
