CODEWITHSUNDEEP
javascriptjqueryhtml
adam78
adam78

Reputation: 10068

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();
        });

  });

Upvotes: 2

Views: 508

Answers (3)

Rindra N.
Rindra N.

Reputation: 21

Try the following:

$(".js-close-post").click(function () {
    $(this).fadeOut("slow", function () {
        var parent = $(this).parent();
        var closedElement = parent.append("Closed").hide();    
        closedElement.fadeIn("slow");
        $(this).remove();
   });
});

https://jsfiddle.net/noLscfh9/

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Using text('Closed') or html('Closed') on the <li> would remove the <a>

Try

$(".js-close-post").click(function (e) {  
     // "this" is the <a>      
     var $li = $(this).closest("li").fadeOut(function () {              
          $li.text('Closed').fadeIn();
     });
});

Upvotes: 3

Kld
Kld

Reputation: 7068

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>

Upvotes: 2

Related Questions