Last Updated on August 18, 2022 by Roshan Parihar
In this tutorial, learn how jQuery remove anchor tag link from div on button click. The Short answer is: use the find() to find the anchor link and unwrap() to remove anchor tag link on click of the button.
The link contains some text and is inside the div element. You can remove the anchor tag from the text and the text is not changed. You have to first find the anchor tag using the find().
The content() find the content inside the anchor tag and the unwrap() remove the anchor tag from the content.
How jQuery Remove Anchor Tag Link to Disable
To perform this task on click of the button, you have to use the jQuery click event. You have to use the jQuery selectors to access the button element for click event and find the anchor link using the find().
You have to use find(), contents() and unwrap() together to jQuery remove anchor tag link.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $('#Mybtn').click(function(){ jQuery('.myDiv').find('a').contents().unwrap(); }); }); </script> <div class="myDiv"> <a href="#">First Link</a> <a href="#">Second Link</a> </div> <button type="button" id="Mybtn" class="btn btn-primary">Remove Link</button> |
Output
The above example contains the two links and a button. Click the link given above to jQuery remove anchor tag link and the text remains present there with no anchor link with it.
I hope, you like the tutorial on how to jQuery remove anchor tag link from div using jQuery. If you have any queries regarding this tutorial, please comment below.