How to remove the attribute from an HTML element in jQuery

I am going to share how to remove the attribute from an HTML element in jQuery. The removeAttr() method deletes attributes from the items picked. In the example below when you press the button the style attribute will be removed from the p tag.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How to remove the attribute from an HTML element in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
   $(document).ready(function(){
       $("#removeAttr").click(function(){
       $("p").removeAttr("style");
     });
});
</script>
</head>
<body>
     <p style="font-size:20px;color:#FF0000">This is a paragraph.</p>
     <button id="removeAttr">Remove the style attribute from p elements</button>
</body>
</html>

Home

Example