Question

在following code中，如果一个输入有错误图标，则删除先前在另一个输入中附加的错误图标。为什么会这样，我该如何解决这个问题？

<div class="reg-input">
  <input type="text" name="first-name" placeholder="First name">
</div>
<div class="reg-input">
  <input type="text" name="last-name" placeholder="Last name">
</div>

var $errorIcon = $('<i class="error">!</i>');
var $regInput = $('.reg-input input');
$regInput.on('focus', function() {
    var $inputWrapper = $(this).parent();
    if ($inputWrapper.has('i').length === 0) {
        $inputWrapper.append($errorIcon);
    }
});

.error {
    color: #fff;
    border: 1px solid brown;
    background: brown;
    border-radius: 100%;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.reg-input {
    position: relative;
}

.reg-input input{
    width: 100%;
}
  }

Answer 1

因为相同的元素被移动到其他位置，所以你需要在追加之前进行克隆：

$inputWrapper.append($errorIcon.clone());

Update Fiddle

Answer 2

由于您要附加相同的元素，因此移动到新位置，移动if块中的元素声明创建一个新元素并附加。

$inputWrapper.append('<i class="error">!</i>');

DEMO

附加元素不会保留在父元素中

2 个答案: