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

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 2

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);