How to Remove Attribute Of Html Elements In jQuery

How to Remove Attribute Of Html Elements In jQuery

How to remove attribute of selected html elements. You can use the jquery api removeAttr() attribute method to remove the selected html elements attribute. We take two example of this method one is How to remove disabled attribute of selected html elements using jQuery? And Second is

jQuery removeAttr() Method

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

Syntax For jQuery Remove Attribute

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

You can use this syntax for remove attribute value.

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

You can use this syntax for remove multiple attribute value.

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 for jQuery removeAttr() method

The example will demostrate 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 for jQuery removeAttr() method

How to remove disabled attribute of selected html elements?

This example will demostrate you how to remove disable attribute from an HTML selected element using jQuery removeAttr() method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>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_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 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.

Leave a Reply

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