Remove style css with jquery

Remove a CSS Property Using jQuery

1. Remove a CSS Property Using jQuery .css() API
2. Remove a CSS Property Using jQuery .prop() API
3. Remove a CSS Property Using jQuery .removeAttr() API
4. Remove a CSS Property Using jQuery .removeClass() API

This article teaches four methods to remove a CSS property using jQuery. These methods will use four jQuery APIs which are .css() , .removeAttr() , .removeClass() , and .prop() .

Remove a CSS Property Using jQuery .css() API

In jQuery, you’ll default use the .css() API to set a CSS property and its value on an element. From this, jQuery will apply the property and the value as inline styles via the HTML style attribute.

But you can also use it to remove a CSS property by setting the property’s value to an empty string. This means this method will not work if the CSS is from the tag or an external CSS style sheet.

We’ve applied a CSS property to an element using jQuery .css() API in the following code. Afterward, you can press the button; this calls a function that will remove the CSS property.

The function’s core is to set the value of a CSS property to an empty string.

 html lang="en"> head>  meta charset="utf-8">  title>01-jQuery-remove-CSStitle>  script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer">script>  head> body>  main>  p id="test">Random Textp>  button id="remove_css">Remove CSSbutton>  main>  script>  $(document).ready(function()  // Add two CSS properties  $("#test").css(  'font-size': '2em',  'background-color': 'red'  >);   /*  * Remove the CSS properties.  */  $("#remove_css").click(function()   $("#test").css(  'font-size': '',  'background-color': ''  >);   // Remove the click event.  $("#remove_css").off('click');  >);  >);  script>  body>  html> 

Remove a CSS Property Using jQuery .prop() API

You can use the jQuery .prop() API to remove a CSS property if you’ve applied the CSS via the jQuery .css() API. That’s because such an element will have the style attribute you can access using the .prop() API.

In the following, we’ve updated the previous code to use the .prop() API to remove the CSS property.

 html lang="en"> head>  meta charset="utf-8">  title>02-jQuery-remove-CSStitle>  script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer">script>  head> body>  main>  p id="test">Random Text 2.0p>  button id="remove_css">Remove CSSbutton>  main>  script>  $(document).ready(function()  // Add two CSS properties  $("#test").css(  'font-size': '3em',  'background-color': '#1560bd'  >);   /*  * Remove the CSS properties.  */  $("#remove_css").click(function()   let element_with_css_property = $("#test").prop('style');   element_with_css_property.removeProperty('font-size');  element_with_css_property.removeProperty('background-color');   // Remove the click event.  $("#remove_css").off('click');  >);  >);  script>  body>  html> 

Remove a CSS Property Using jQuery .removeAttr() API

The .removeAttr() API will remove a CSS property by removing the style attribute from the element. This means the CSS should be inline, or you’ve applied it using the jQuery .css() API.

The button will remove all the CSS properties by removing the style attribute.

 html lang="en"> head>  meta charset="utf-8">  title>03-jQuery-remove-CSStitle>  script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer">script>  head> body>  main>  p id="test">Random Text 3.0p>  button id="remove_css">Remove CSSbutton>  main>  script>  $(document).ready(function()  // Add two CSS properties  $("#test").css(  'padding': '2em',  'border': '5px solid #00a4ef',  'font-size': '3em'  >);   /*  * Remove the CSS properties.  */  $("#remove_css").click(function()   $("#test").removeAttr('style');   // Remove the click event.  $("#remove_css").off('click');  >);  >);  script>  body>  html> 

Remove a CSS Property Using jQuery .removeClass() API

The .removeClass() API will remove a CSS property added via the tag or an external style sheet. If you pass a class name, it will remove it; otherwise, it will remove all the class names on the element.

The following example shows .removeClass() in action.

 html lang="en"> head>  meta charset="utf-8">  title>04-jQuery-remove-CSStitle>  script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer">script>  style>  .colorful_big_text   color: #1560bd;  font-size: 3em;  >  style>  head> body>  main>  p id="test">i>Random Text 4.0i>p>  button id="remove_css">Remove CSSbutton>  main>  script>  $(document).ready(function()  // Add a CSS class that contains CSS properties  $("#test").addClass('colorful_big_text');   /*  * Remove the CSS properties.  */  $("#remove_css").click(function()   $("#test").removeClass();   // Remove the click event.  $("#remove_css").off('click');  >);  >);  script>  body>  html> 

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

Источник

jQuery remove style attribute, CSS inline with example.

jQuery remove style inline CSS: Here in this article, we learn how we remove inline style CSS property in jQuery. While developing a website if we have used any themes for our design, we have found that our HTML tags may be div tags or any other element that has some unnecessary inline style. This inline style makes our page design dirty. To fix this design issue we need to remove all the inline styles, and doing this manually is a tedious task. But with jQuery, we can achieve it with few lines of code. So later we can add our own CSS styling to make it look like as per our requirement.

2 different approaches to remove style inline CSS in jQuery.

• Use removeAttr() to remove all inline style attribute.
• Use CSS() to remove the specific CSS property.

Remove style jQuery demo output as follow:

# Using jQuery .removeAttr() to remove all inline style.

To remove or delete all the inline style property from our webpage, we simply use jQuery removeAttr() method. Using .removeAttr() we remove a specific attribute in jQuery from the selected elements.

Here we have a div tag contain many CSS properties as written below, And now using .removeAttr() will remove all its inline style. Basically, we code in jQuery to clear CSS all properties.
HTML:

 
hello world
 
 Remove All Inline Style Remove Inline Style width 

jQuery: Here’s the jquery code where on button click, we remove all the style property of our div element.

Here in above demo, how easily with jQuery remove style of div element is implemented successfully.

# Using jQuery .css() method to remove specific CSS property.

In the previous example, we learn how to clear all inline-style property. But what if we want to remove one specific property. For example, if we want to remove the only width from inline style, or if we want to remove only height from it. In short, how do we delete a specific CSS property in jQuery?

For that we use the jQuery .CSS() method, this method sets or returns one or more style properties for the selected elements. As we want to remove the width property so we use the .css() method and set the width as blank.

By doing this it will remove width from the inline style. Same we can do for height, top, left position respectively

jQuery: Here on button click, we use the .css() method and set the width as an empty value to remove the width CSS property from inline style.

Conclusion: Here we learn about how to use .removeAttr() and .CSS() method to remove or manipulate inline CSS style. And able to customize our web page styling.

In short we able to remove all style attributes or specific CSS property like modifying height, width, color, etc.

Other Reference:

You can also check these articles:

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.

Your email address will not be published. Required fields are marked *

Источник

How to Remove Style Added with the .css() function Using jQuery

You can remove styles added using both JavaScript and jQuery. However, in this tutorial, we suggest jQuery methods that require lesser code.

Let’s discuss the following scenario:

if (color != 'ffffff') $("body").css("background-color", color); else // remove style ?

Now let’s remove styling. An empty string will remove the CSS color property:

Don’t do css(«background-color», «none») as it will remove the default styling from the css files.

There is another way to remove style. Simply use jQuery removeAttr() method:

html> html> head> title>Title of the Document title> script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js"> script> head> body> h1 style="color:red">Red text h1> button>Remove button> script> $(document).ready(function( ) < $("button").click(function( ) < $("h1").removeAttr("style"); >); >); script> body> html>

The css() and removeAttr() Methods

The .css() jQuery method is used to set or return one or more style properties for the selected elements.

The .removeAttr() jQuery method removes an attribute from each element in the collection of matched elements.The method uses the JavaScript removeAttribute() function, but it is capable of being called directly on a jQuery object.

Источник