jQuery Remove Attribute or Disabled Attribute From Element

jQuery Remove Attribute or Disabled Attribute From Element

How to remove an attribute of selected html elements.

You can use the jquery removeAttr () attribute method to remove the selected HTML elements attribute or remove disabled attribute jquery.

Here we will take e.g. like, remove href attribute, remove data attribute value, remove disabled attribute, and jquery remove disabled attribute from select option.

jQuery removeAttr() Method

Using the jQuery () Method can removes the specified attributes from the HTML element.

Syntax For jQuery Remove Attribute

You can use this syntax to remove attribute value.

$("selector").removeAttr(attribute);

You can use this syntax to remove multiple attribute value.

$("selector").removeAttr(attribute attribute);

Parameters of removeAttr() Method

ParameterDescription
attributeThis is required. It specifies one or more attributes to remove of elements. To remove several attributes, separate the attribute names with a space

Example first – jquery remove anchor attribute

The example will demonstrate to you how to remove attributes from an HTML selected element using jQuery removeAttr() method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Remove Attribute from HTML Selected Element</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".remove").click(function(){            
            $("#link").removeAttr("href style");
        });
    });
</script> 
</head>
<body>
    <h3 style="margin-bottom: 10px">Click the button given below</h3>
    <p><a id="link" href="https://www.tutsmake.com" style="background-color: green; font-size: 50px;">Tutsmake.com</a></p>
    <button type="button" class="remove">Remove Attribute</button>
</body>
</html>                            

Output

Remove Attribute from HTML Selected Element

Click the button given below

Tutsmake.com

In this above example of removeAttr() method, You can use the jQuery removeAttr() method to remove attribute of selected HTML element. When we click the Remove link button it will remove the anchor tag href attribute.

If you want to remove multiple attribute of selected html elements, you can simply pass the multiple attribute in removeAttr() method. In this remove attribute example, we have remove multiple attribute of the selected html elements.

Example second – jquery remove attribute disabled

How to remove the disabled attribute of selected HTML elements?

This example will demonstrate to you how to remove disabled attributes from an HTML selected element using the jQuery removeAttr() method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Remove Disabled Attribute from HTML Selected Element</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".remove_btn").click(function(){            
            $(".disabled").removeAttr("disabled");
        });
    });
</script> 
</head>
<body>
    <h3 style="margin-bottom: 10px">Below this checkbox &amp; input box are disabled</h3>
    <p><input type="checkbox" class="disabled" disabled></p>
    <p><input type="text" class="disabled" disabled="disabled"></p>
    <p><b>Note:</b> Click the below buttons and remove disabled attribute.</p> 
    <button type="button" class="remove_btn">Remove Attribute</button>
</body>
</html>                            

Output

Remove Disabled Attribute from HTML Selected Element

Below this checkbox & input box are disabled

Note: Click the below buttons and remove disabled attribute.

In the first time the selected html attribute is already set disabled, When you click on button, an alert box should show whether the attribute is removed or not.

Example Third – jquery remove disabled attribute from select option

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Remove Disabled Attribute From Select Option</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function() {
        $(".remove_select_btn").click(function(){            
            $(".option").removeAttr("disabled");
        });
    });
</script> 
</head>
<body>
    <h3 style="margin-bottom: 10px">jQuery Remove Disabled Attribute From Select Box Option</h3>
    <select class="select">
        <option>Select Number</option>
        <option class="option" data-number="0" disabled>0</option>     
        <option class="option" data-number="1" disabled>1</option> 
        <option class="option" data-number="1" disabled>2</option>     
    </select>
    <p><b>Note:</b> Click the below buttons and remove disabled attribute from select box option.</p> 
    <button type="button" class="remove_select_btn">Remove Attribute</button>
</body>
</html>                            

Output

jQuery Remove Disabled Attribute From Select Option

jquery remove disabled attribute from select option

Note: Click the below buttons and remove disabled attribute from select box option.

You may like

  1. How to Get & Set Data Attribute Value From Elements jQuery
  2. jQuery | Event MouseUp By Example
  3. Event jQuery Mouseleave By Example
  4. jQuery Event Mouseenter Example
  5. Event jQuery MouseOver & MouseOut By Example
  6. keyup jquery event example
  7. Jquery Click Event Method with E.g.
  8. Event jQuery. Blur By Example
  9. jQuery form submit event with example
  10. keydown function jQuery
  11. List of jQuery Events Handling Methods with examples
  12. Jquery Selector by .class | name | #id | Elements
  13. How to Get the Current Page URL in jQuery
  14. jQuery Ajax Get() Method Example
  15. get radio button checked value jquery by id, name, class
  16. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  17. jQuery Get Data Text, Id, Attribute Value By Example
  18. Set data attribute value jquery
  19. select multiple class in jquery
  20. How to Remove Attribute Of Html Elements In jQuery
  21. How to Checked Unchecked Checkbox Using jQuery
  22. jQuery removeClass & addClass On Button Click By E.g.
  23. To Remove whitespace From String using jQuery
  24. jQuery Ajax Post Method Example
  25. jQuery Ajax Get Method Example
  26. To Load/Render html Page in div Using jQuery Ajax $.load
  27. jQuery Sibling Methods – To Find Siblings Elements
  28. jQuery Find Siblings Elements with Class, id

Leave a Reply

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