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?

Degeneracy

Try .text() instead of .replaceWith() – Ypres

same result as replaceWith – Degeneracy

What exactly is it that you want to happen? .replaceWith() will replace the whole <li> element with what you pass it, so that gets rid of the text that was there before and it gets rid of the icon. – Sw

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.

Veedis

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

Odyssey

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

Ypres

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.

Filiano