How to change Button name without changing the fontawesome icon with Jquery

Question

I have some jQuery code to change the button text when it is clicked. Originally (before clicking) the button is like this:

<button type="button"style="margin-top: 5px;" class="btn btn-danger btn-sm" id="image-remove-btn-4">
  <i class="fa fa-trash"></i> 
  Remove Photo
</button>

This is my jQuery to change button name to Photo deleting...

$("#image-remove-btn-4").text("Photo deleting...");

The button text is changed successfully but the problem is that the FontAwesome icon is removed once the button is clicked. Are there any solutions for this?

Answer 1

Try it like:

$("#image-remove-btn-4").html("<i class='fa fa-trash'></i> Photo deleting...");

Answer 2

Change the text for the <i> tag.

For example:

$(".fa-trash").text("Photo deleting...");