Jquery在元素后插入html删除现有元素

Question

您好(我找不到任何与此类似的问题，如果您找到，请告诉我)，这里要实现的目标是在元素之后插入 html 内容，并且如果 html 内容是在删除之前插入的。我现在的代码[部分HTML和Js]

<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>
    $(document).ready(function (){
        $("form").on("submit",function (e){
            e.preventDefault();
            $(this).find(":text").each(function (){
                if($(this).val()==''){
                    $(this).after("<p class='error'>Please fill this field</p>");
                }
            });
        });
    });
</script>

代码完成了它的工作，但问题是，如果表单提交多次，文本“请填写此字段”会显示多次我考虑过在每次输入后放置一个跨度(或div)并编写下一个代码:

 $(this).next("span").html("<p class='error'>Please fill this field</p>");

这将是一个解决方案，但问题是我必须在我想要验证的每个输入之后编写一个跨度，而这效率不高。我想知道一种更好的方法来实现这一目标，如果你能告诉我那就太棒了，

Answer 1

执行此操作的一种方法是删除所有错误，然后重新添加适用的错误。

$(document).ready(function (){
    $("form").on("submit",function (e){
        e.preventDefault();
        $("p.error").remove();
        $(this).find(":text").each(function (){
            if($(this).val()==''){
                $(this).after("<p class='error'>Please fill this field</p>");
            }
        });
    });
});

input {
  display:block;
  margin-top:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="somePage.php">
    <input type="text">
    <input type="text">
    <input type="submit">
</form>
<script>

</script>