How to remove a tag without deleting its content with jQuery

admin January 4, 2021October 12, 2021 0 Comments jquery remove child element from parent, jquery remove element

In this tutorial, we are going to see how to remove a tag without deleting its content with jQuery. Sometimes you may need to remove the parent element, a typical example is removing the anchor tag around the text. With jQuery’s unwrap() method, you can easily remove the parent element and keep the HTML content or internal text intact.

How to remove a tag without deleting its content with jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Remove a tag without deleting its content</title>
		<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("button").click(function(){
					$("p").find("a.lien").contents().unwrap();
				});
			});
		</script>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing <a href="#" class="lien">this is a link</a>. In dictum, non amet consequat facilisis, augue convallis tempor dapibus.</p>
		<button type="button">Remove link</button>
	</body>
</html>