[英]JQuery remove hyperlink and replace with text
How can I remove a hyperlink from a li and replace it with some other text? 如何从li中删除超链接并将其替换为其他文本?
<li class="pull-left">
<a href="#" class="js-close-post" data-post-id="1">
Close
</a>
</li>
The following removes the entire li. 以下内容删除了整个li。 What I want is to fade out the link and fade in with the text Closed
我想要的是淡出链接并在文本为“ Closed
淡入
<li class="pull-left">
Closed
</li>
$(".js-close-post").click(function (e) {
var link = $(e.target);
link.parents("li").fadeOut(function () {
$(this).remove();
});
});
Using text('Closed')
or html('Closed')
on the <li>
would remove the <a>
在<li>
上使用text('Closed')
或html('Closed')
会删除<a>
Try 尝试
$(".js-close-post").click(function (e) {
// "this" is the <a>
var $li = $(this).closest("li").fadeOut(function () {
$li.text('Closed').fadeIn();
});
});
You can jQuery .replaceWith() for this. 您可以为此使用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>
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/ https://jsfiddle.net/noLscfh9/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.