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

你可以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 2

在<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 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/