javascript - 如何使用 jquery 删除附加元素？

Question

我正在创建一个表格。在为每个输入字段提交表单时，会在未填写该输入字段时附加一个错误框。我想删除或显示该输入字段的错误框 onFocus。而在我的代码中将保留在该位置。我试过了，我浏览了所有类似的帖子，但找不到解决方案。谢谢！

html代码就像

<div class="rowform">
        <label for="name">Name<span>*</span>:</label>
        <input type="text" class="mid" name="name" id="name" onFocus="fcs();"/><span id="name_error"></span>

    </div>

脚本 //在提交表单时我如何附加错误框

if($("#listcontact #name").val()==""){
    $("#name_error").append("<div class='formerror'>Please enter your name</div>");
}

// on Focus函数就像

    function fcs()
{
$(".formerror").remove();}

Answer 1

就像是：

$(".rowform").on("focus", "input", function(){
    $(this).closest(".rowform").find(".formerror").hide();
});

更新：确实不需要像 Ian 所说的事件委托。

$(".rowform").find('[type="text"]').on("focus", function(){
    $(this).closest(".rowform").find(".formerror").hide();
});

工作小提琴：http: //jsfiddle.net/Ar7AT/

Answer 2

尝试关注

$("#name").focus(function(){
    $(".formerror").remove();
});

$("#btn").on("click",function(){

 $(".formerror").remove();

 if($("#name").val()==""){  
    $("#name_error").append("<div class='formerror'>Please enter your name</div>");
 }
});

在这里工作小提琴：http: //jsfiddle.net/fzS95/1/

我希望它有帮助。

Answer 3

您可以使用 。remove()反而.hide()

$(".rowform").on("focus", "input", function(){
    $(this).closest(".rowform").find(".formerror").remove();
});

Answer 4

我不确定你想如何实现它，但是，我希望这会有所帮助：

<div class="rowform">
    <label for="name">Name<span class='name-check'>*</span>:</label>
    <input type="text" class="mid" name="name" id="name" onFocus="fcs('name', this);"/><span id="name_error"></span>
</div>

<script>
    function fcs(err,obj) {
        if( $(obj).val() == "" ) {
            $("." + err + "-check").show();
        }
        else {
            $("." + err + "-check").hide();
        }
    }
</script>