jQuery .replaceWith() method not working

Question

I have a problem using the .replaceWith() , it's working for the first blur, but not for the second one, here's my code :

$("#wilaya").blur(function () {
  $("#wilayaRow .tdrequired").css("color", "#333");
  if ($("#wilaya").val() !== "Selectionnez une wilaya...") {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/check-mark-md.png' width='20px' height='28px'></img>");
  }
  else {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img>");
  }
});

And here's the html part :

<table>
  <tr id="wilayaRow">
    <td class="tdtitle">
      <label for="wilaya">Wilaya d'immatriculation</label>
    </td>
    <td class="tdinput">
      <select name="wilaya" id="wilaya">
        <option>Selectionnez une wilaya...</option>
        <option>Khalil</option>
        <option>Moh</option>
      </select>
    </td>
    <td class="tdrequired">
      <label>*</label>
    </td>
  </tr>
  ...
</table>

Thanks for your help in advance :)

Answer 1

Here's the working jQuery code I just implemented :

    $("#wilaya").blur(function () {
            $("#wilayaRow .tdrequired").css("color", "#333");
            if ($("#wilaya").val() !== "Selectionnez une wilaya...") {
                    $("#wilayaRow .tdrequired label").replaceWith("<label><img src='../../Images/check-mark-md.png' width='20px' height='28px'></img></label>");
            }
            else {
                    $("#wilayaRow .tdrequired label").replaceWith("<label><img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img></label>");
            }
    });

If I have to replace the label with an image, I must put it in a label, so the next replacement could be possible. Otherwise, the label tag won't be found (because it doesn't exist anymore), and it won't be replaced by an image, or anything else.

Also the use of :

    $("#wilaya").prop("selectedIndex") === 0

As a condition is better.

Answer 2

$("#wilaya").blur(function () {
  $("#wilayaRow .tdrequired").css("color", "#333");
  if ($("#wilaya").val() !== 0) {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/check-mark-md.png' width='20px' height='28px'></img>");
  }
  else {
    $("#wilayaRow .tdrequired label").replaceWith("<img src='../../Images/red-wrong-cross-md.png' width='20px' height='28px'></img>");
  }
});

this is jquery part.

 <table>
  <tr id="wilayaRow">
    <td class="tdtitle">
      <label for="wilaya">Wilaya d'immatriculation</label>
    </td>
    <td class="tdinput">
      <select name="wilaya" id="wilaya">
        <option value="0">Selectionnez une wilaya...</option>
        <option value="1">Khalil</option>
        <option value="2">Moh</option>
      </select>
    </td>
    <td class="tdrequired">
      <label>*</label>
    </td>
  </tr>
</table>

this is html part. try out. i hope this helps.