jQuery removes Font Awesome Icon

Question

I am using Font Awesome and jQuery in an experiment, after an animation, the jQuery replaces a loading icon in a list by a check, and the text changes too. However, when I remove the jQuery replaceWith method, the icon stays:

HTML:

<ul class="fa-ul">
        <li><i class="fa-li fa fa-spinner fa-spin" id = "ToDo1"></i>Downloading</li>
        <li><i class="fa-li fa fa-square" id = "ToDo2"></i>text</li>
        <li><i class="fa-li fa fa-square" id = "ToDo3"></i>text</li>
        <li><i class="fa-li fa fa-square" id = "ToDo4"></i>text</li>
</ul>

jQuery:

setTimeout(function() {
    $("#ToDo1").removeClass("fa-spin fa-spinner");
    $("#ToDo1").addClass("fa-check-square");
    $("li:first").replaceWith("Download Complete");
    $("#ToDo2").addClass("fa-spin fa-spinner");
}, 2000);

Result:

before:

After jQuery replaceWith

What is the problem?

Answer 1

The problem is that you replace the complete LI node instead of the inner text node inside it. To be able to address the text, wrap it in a SPAN like this.

<ul class="fa-ul">
    <li><i class="fa-li fa fa-spinner fa-spin" id = "ToDo1"></i><span class="download-status">Downloading</span></li>
    <li><i class="fa-li fa fa-square" id = "ToDo2"></i>text</li>
    <li><i class="fa-li fa fa-square" id = "ToDo3"></i>text</li>
    <li><i class="fa-li fa fa-square" id = "ToDo4"></i>text</li>
</ul>

Then you can change only the text you want like this.

setTimeout(function() {
    $("#ToDo1").removeClass("fa-spin fa-spinner");
    $("#ToDo1").addClass("fa-check-square");
    $("li:first > span").text("Download Complete");
    $("#ToDo2").addClass("fa-spin fa-spinner");
}, 2000);

Answer 2

Change out this:

$("li:first").replaceWith("Download Complete");

With this:

$("li:first").html('<i class="fa-li fa fa-square" id = "ToDo1"></i>Download Complete');

In reality though, FlipFloop, you'll want to target your <i> element and text separately. Put your message into a span you can target independently of your markup replacement, like so:

<li><i class="fa-li fa fa-square" id = "ToDo2"></i><span>text</span></li>


$("li:first i").removeClass("fa-spin fa-spinner").addClass("fa-check-square");
$("li:first span").text("Download Complete");

Hope this helps.

Answer 3

Ah it's because you have i elements inside your li elements

So you'll need to make jQuery prepend an i element after changing the text

So .replaceWith and .text will get rid of the i

So you could do this

$('li:first').html('<i class="your font awesome class"></i>Download Complete');

Answer 4

Try the following snippet :

 $(document).ready(function() { var time = 500; $('.load').each(function() { var temp = $(this); setTimeout(function() { temp.removeClass("fa-spin fa-spinner"); temp.addClass("fa-check-square"); temp.next("div").text("Download Complete"); temp.next("i.load").addClass("fa-spin fa-spinner"); }, 2000, temp); }); }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="fa-ul"> <li><i class="fa-li fa fa-spinner fa-spin load" id="ToDo1"></i> <div>Downloading</div> </li> <li><i class="fa-li fa fa-square load" id="ToDo2"></i>text</li> <li><i class="fa-li fa fa-square load" id="ToDo3"></i>text</li> <li><i class="fa-li fa fa-square load" id="ToDo4"></i>text</li> </ul> 

Wrap the text in a span and then change it since replaceWith will replace the complete contents of the li including the icon .