jQuery Tutorial

jQuery Examples

jQuery Practice

JQuery MCQs

Home » jQuery » jQuery DOM Manipulation Methods

jQuery removeAttr() Method

jQuery | removeAttr() Method: Learn about the jQuery removeAttr() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 18, 2022

removeAttr() Method

The removeAttr() method is a built-in method in jQuery that helps to remove the specified attributes of the selected elements from the web page. With this, either an attribute or the number of attributes can be removed. This method removes everything related to that attribute from the element. That is, it helps to overall delete the selected element's attribute properties and values.

removeAttr() Method Syntax

$('selector').removeAttr(attributeName);

It has a simple syntax, where the element is specified through its selector. It accepts the attribute name that has to be removed. We can pass more than one attribute name over here with spaces in between each of them. This method returns the element with removed properties and values.

The below example shows the implementation of the removeAttr() method. When the button is clicked, it removes the class attribute which has been specified for the elements, and hence, the styling is removed from the selected elements.

jQuery removeAttr() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
      .bold{
      font-size: larger;
      font-weight: bolder;
      color: green;
      }
    </style>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Remove Attr</h2>
    <p>Click the button to remove attributes of some of the selected content.</p>
    <button>Remove Attr</button>
    <hr>
    <p class="bold">This is sentence one.</p>
    <div>This is sentence two.</div>
    <h4 class="bold">This is sentence three.</h4>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('.bold').removeAttr('class');
        })
    });    
  </script>
</html>

Output:

jQuery removeClass() Method

jQuery insertBefore() Method

Comments and Discussions!

Load comments ↻