Javascript 更改输入上的图标并删除以前的图标（Jquery）

我有一个输入字段，我想根据输入字段中是否有任何数据显示图标（如果没有数据，则发出警告，如果输入字段已填充，则选中图标）

我的代码是：

$(".input-icon").blur(function(){
  if($(this).val()) {
    $(this).before('<i class="fa fa-check text-complete left-info"></i>');
  } else {
    $(this).before('<i class="fa fa-warning text-warning left-info"></i>');
  }
});

$（“.input icon”）.blur（函数（）{
if（$（this.val（））{
$（本）。在（''）之前；
}否则{
$（本）。在（''）之前；
}
});

因此，我面临的问题是：

如果存在现有数据，我想在用户加载页面时显示图标

如果字段有数据，它将显示一个复选图标，但是如果数据从字段中删除，它将显示两个图标，我想销毁另一个图标，只显示一个

---

我尝试在if语句中创建更改时的图标和一个空（）。试试这个代码

$(".input-icon").blur(function(){
  if($(this).val()) {
    $(this).before('<i class="fa fa-check text-complete left-info"></i>');
  } else {
    $('i', this).remove();
    $(this).before('<i class="fa fa-warning text-warning left-info"></i>');
  }
});

$（“.input icon”）.blur（函数（）{
if（$（this.val（））{
$（本）。在（''）之前；
}否则{
$（'i'，this.remove（）；
$（本）。在（''）之前；
}
});

您可以搜索

i

元素并将其删除

$(this).siblings('i').remove();

在jQuery中，有许多不同的选择器和功能来查找所需的元素。在您的情况下，它应该是

同级

，因为您的图标与您的输入处于同一级别

另一种方法是获取对

父元素的引用

var parent = $(this).parent();
parent.find('i').remove();

供参考的最佳做法是保存
$（this）
的引用

$（“.input icon”）.blur（函数（）{
var self=$（这是）；
self.sibbins（'i'）.remove（）；
if（self.val（））{
自我之前（“”）；
}否则{
自我之前（“”）；
}
});
您必须先删除旧图标这正是我要找的！一切如愿！
$(".input-icon").blur(function(){
  var self = $(this);
  self.siblings('i').remove();
  if(self.val()) {
    self.before('<i class="fa fa-check text-complete left-info"></i>');
  } else {
    self.before('<i class="fa fa-warning text-warning left-info"></i>');
  }
});