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();
});
});
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();
});
});
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>
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();
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.