jQuery删除超链接并替换为文本

Question

如何从li中删除超链接并将其替换为其他文本？

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

以下内容删除了整个li。 我想要的是淡出链接并在文本为“ Closed淡入

<li class="pull-left">
    Closed

 </li>

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

  });

Answer 1

在<li>上使用text('Closed')或html('Closed')会删除<a>

尝试

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

Answer 2

您可以为此使用jQuery .replaceWith（） 。

  $(".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> 

Answer 3

请尝试以下操作：

$(".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/