ozzii ozzii - 4 months ago 17
jQuery Question

JQuery remove hyperlink and replace with text

How can I remove a hyperlink from a li and replace it with some other text?

<li class="pull-left">
<a href="#" class="js-close-post" data-post-id="1">
Close
</a>
</li>


The following removes the entire li. What I want is to fade out the link and fade in with the text
Closed


<li class="pull-left">
Closed

</li>

$(".js-close-post").click(function (e) {
var link = $(e.target);
link.parents("li").fadeOut(function () {
$(this).remove();
});

});

Kld Kld
Answer

You can jQuery .replaceWith() for this.

  $(".js-close-post").click(function (e) {
        var link = $(e.target);
        $a = $(this);
        $a.parents("li").fadeOut(function () {
             $a.replaceWith($a.text());
        }).fadeIn();

  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="pull-left">
     <a href="#" class="js-close-post" data-post-id="1">
       Close
     </a>
 </li>