Тик и крест после ввода - jQuery

Question

все. Я хочу отображать галочку рядом с полем ввода, если пользователь написал какой-либо текст (или все еще пишет) и перекрестится, если поле ввода пуст. Это моя попытка:

$('#myForm input').blur(function(){ 
    if($(this).val() == '') 
    { 
     $(this).after("<img src='./media/img/cross.png' style='margin-top: 15px;'/>"); 
    } 
}); 

$('#myForm input').keypress(function(){ 
    if($(this).val() != '') 
    { 
     $(this).after("<img src='./media/img/tick.png' style='margin-top: 10px; width: 1.5em; height: 1.5em;'/>"); 
    } 
}); 

Верхний код добавляет изображение, когда пользователь печатает письмо. Как я могу избежать этого? Есть ли более элегантный способ сделать это?

Заранее спасибо.

UPDATE

Это мой HTML:

<form id="myForm" name="loginForm"> 
    <input type="text" class="input" placeholder="Username" id="username"/> 
    <input type="password" class="input" placeholder="Password" id="password"/> 
    <input type="submit" class="btns" value="Login" name="submitLogin"/> 
</form> 

Answer 1

Добавить как теги изображений в формате HTML, и дать им класс с display: hidden. Используйте события не добавлять элементы DOM с .after(), но и использовать их, чтобы установить или сбросить скрытый класс на вашем ГИМ соответственно, вроде как это:

$('#myForm input').blur(function(){ 
 
     if($(this).val() == '') 
 
     { 
 
      $(this).next('.tick').addClass('hidden'); 
 
      $(this).next('.tick').next('.cross').removeClass('hidden'); 
 
     } 
 
    }); 
 

 
    $('#myForm input').keypress(function(){ 
 
     if($(this).val() != '') 
 
     { 
 
      $(this).next('.tick').next('.cross').addClass('hidden'); 
 
      $(this).next('.tick').removeClass('hidden'); 
 
     } 
 
    });

.hidden {display: none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" name="loginForm"> 
 
    <input type="text" class="input" placeholder="Username" id="username"/><img class="hidden tick" src="#" alt="tick" /><img class="hidden cross" src="#" alt="cross" /><br/> 
 
    <input type="password" class="input" placeholder="Password" id="password"/><img class="hidden tick" src="#" alt="tick" /><img class="hidden cross" src="#" alt="cross" /><br/> 
 
    <input type="submit" class="btns" value="Login" name="submitLogin"/> 
 
</form>