The removeAttr() method is an inbuilt functionality in jQuery which is used to remove one or more attributes from the selected elements.
Example 1: Below example when you click the “Remove Style” button it will remove the style attribute from the link.
<!DOCTYPE html>
<html>
<head>
<title>jQuery removeAttr Method</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<section>
<div class="container text-center">
<h1>jQuery removeAttr Method</h1>
<div style="padding:20px;border:1px solid #888;width: 300px;margin:20px auto;">
<p style="font-size:30px;">Welcome to</p>
<p style="font-size:30px;">Codeamend!</p>
<button class="btn btn-primary">Remove Style</button>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").removeAttr("style");
});
});
</script>
</body>
</html> Example 2: Below example when you click the “Remove Link” button it will remove the href attribute from the link.
<!DOCTYPE html>
<html>
<head>
<title>jQuery removeAttr Method</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<section>
<div class="container text-center">
<h1>jQuery removeAttr Method</h1>
<div style="padding:20px;border:1px solid #888;width: 300px;margin:20px auto;">
<button class="btn btn-primary remove-attr">Remove Link</button><br>
<a href="https://codeamend.com/">codeamend</a>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".remove-attr").click(function(){
$("a").removeAttr("href");
});
});
</script>
</body>
</html>