Add / Remove icon base on the JavaScript result-CodePudding

In my view, based on the javascript result I'm getting from the Ajax call, I want to add and remove the icon class for a div area.

So far I did this,

<div > @Html.LabelFor(model => model.TaskDetailsList.First().Service_Price, htmlAttributes: new { @class = "control-label col-md-3 required" }) <div >
    <div> @Html.EditorFor(model => model.TaskDetailsList.First().Service_Price, new { htmlAttributes = new { @class = "form-control", @disabled = true } }) </div>
    <div  id="iconforPay">
      <span id="PaymentStatus"></span>
    </div>
  </div>
</div>

on the javascript,

if (direc == 0) {
  console.log("true");
  document.getElementById('PaymentStatus').innerHTML = "Payment Completed";
  $(".iconforPay").append('<i ></i>');
} else {
  console.log("false");
  document.getElementById('PaymentStatus').innerHTML = "Payment Pending";
  $(".iconforPay").append('<i ></i>');
}

What I wanted to do is, if the result is ==0 then I want to show Payment Completed text on the span id="PaymentStatus" and then need to show the icon class.

Else I want to show span id="PaymentStatus" as Payment Pending and add the related icon to there.

Here Text is changing, but the icon is not showing.

Also, Need to know, how to remove icon class in the start of the javascript and adding with the javascript.

CodePudding user response：

Please check you added CDN link for the bootstrap icon exactly.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Remove icon class.

$(".bi-check-circle-fill").removeClass("color-red-dark")

if you remove a class and want to add new class, you can do this like this.

$(".bi-check-circle-fill").removeClass("color-red-dark").addClass("color-green-dark")

If you run this code when the page is loaded, you can add this code in document.ready function.

$(document).ready(function(){
  $(".bi-check-circle-fill").removeClass("color-red-dark")
});