How To Remove Attribute in Jquery

The removeAttr() method of Jquery, is used to remove the attribute from the Html tag. In its parameter give the attribute name of an element that you want to delete/remove.

Table of Contents
Remove attribute in Jquery Remove an attribute of all same elements Remove style attribute Remove data attribute Remove multiple attributes Remove class attribute Remove all attributes by using loop

Remove attribute in Jquery

<!DOCTYPE html>
<html>
<head>
	<title>Remove attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

	<h1 align="center" id="ele_h">This H1 tag has align="Center" attribute</h1>

	<button id="btn">Remove attribute</button>


	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("#ele_h").removeAttr("align");
				$("#ele_h").html("attribute removed");
			});
		});


	</script>

</body>
</html>

Remove an attribute of all same elements (ex:- H1)

Just use the tag selector of Jquery to select all the same elements.

<!DOCTYPE html>
<html>
<head>
	<title>Remove attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

	<h1 align="center" id="ele_h">This H1 tag has align="Center" attribute</h1>
	<h1 align="center" id="ele_h">This H1 tag has align="Center" attribute</h1>
	<h1 align="center" id="ele_h">This H1 tag has align="Center" attribute</h1>
	<h1 align="center" id="ele_h">This H1 tag has align="Center" attribute</h1>
	<h1 align="center" id="ele_h">This H1 tag has align="Center" attribute</h1>

	<button id="btn">Remove all H1 tag's attribute</button>


	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("h1").removeAttr("align");
				$("h1").html("attribute removed");
			});
		});


	</script>

</body>
</html>

Remove "style" attribute

<!DOCTYPE html>
<html>
<head>
	<title>Remove attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

	<h1 style="color:red;" id="ele_h">This H1 tag has style="color:red;" attribute</h1>
	<button id="btn">Remove STYLE attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("h1").removeAttr("style");
				$("h1").html("attribute removed");
			});
		});
	</script>
</body>
</html>

Remove the "data" attribute

Inspect the HTML element to see the attribute removing.

<!DOCTYPE html>
<html>
<head>
	<title>Remove data attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<h1 data-target="none" align="center" id="ele_h">This H1 tag has data-target="none" attribute</h1>
	<button id="btn">Remove Data attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("h1").removeAttr("data-target");
				$("h1").html("attribute removed");
			});
		});
	</script>
</body>
</html>

Remove multiple attributes

Pass attributes name one by one in the removeAttr() method by separating them with space. And should be surrounded by double-quotes. Example:- removeAttr("align style id")

<!DOCTYPE html>
<html>
<head>
	<title>Remove multiple attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<h1 style="color:red;" align="center" id="ele_h">This H1 tag has style & align attribute</h1>
	<button id="btn">Remove multiple attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("h1").removeAttr("style align");
				$("h1").html("attribute removed");
			});
		});
	</script>
</body>
</html>

Remove class in Jquery

<h1 class="heading" align="center" id="ele_h">This tag has Class="Heading"</h1>
	<button id="btn">Remove Class attribute</button>
	<script>
		$(document).ready(function(){
			$("#btn").click(function(){
				$("h1").removeAttr("class");
				$("h1").html("attribute removed");
			});
		});
	</script>

Remove all attributes by using a loop

<!DOCTYPE html>
<html>
<head>
	<title>Remove all attribute in Jquery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

	<h1 class="heading" style="color:red;" align="center" id="ele_h">This is H1 tag</h1>
	<button id="btn">Remove All attribute</button>
	<script>
	$(document).ready(function(){
	$("#btn").click(function(){
		var h_attribute = document.getElementById("ele_h").attributes;
		var length = h_attribute.length;
		var all_attributes_name;
		var i;
		for(i=0;i<length;i++)
		{
			all_attributes_name += h_attribute[i].name+" ";
		}
			var remove_att = all_attributes_name.slice(9);
			$("#ele_h").removeAttr(remove_att);
			alert(remove_att+"| attributes have been removed from element");
	});
});

</script>
</body>
</html>

Do not know why but here, I am getting undefined before the attribute name, so I took the help of the slice() method of JS to remove this.

Other Helpful Posts