Question

我正在尝试通过单击添加更多按钮来增加字段数，并且我成功地这样做了。但是，我不明白我哪里错了。它显示警报，但不会删除任何帮助的字段。

Jquery的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    var x=0;
    $('#addmore').click(function(e){
        e.preventDefault();

        $("#Files").append("<input name='file' id='file"+x+"' type='file'/><br>");
        $("#rem").append("<input  value='remove' id='but"+x+"' type='button'/><br>");
        $("#but"+x).click(function(){
                alert("#but"+x);
                $("#but"+x,"#file"+x).remove();
        });

      x++;
    });

});
</script>

HTML：

<body>
<div>
<form name="imageForm" id="imageForm" method="post" enctype="multipart/form-data" action="imageuploadlogic.jsp">
<input type="file" name="file0" id="imagefile" class=""/><br>
<div id="Files" style="float: left;"></div>
<div id="rem" style="float: left;"></div><br>
<input type="button" id="addmore" value="addmore"/>
<input type="submit" id="submitimage" />
</form>
</div>
</body>

Answer 1

由于您使用的是共享变量x，因此删除逻辑将无法正常尝试

$(document).ready(function () {
    var x = 0;
    $('#addmore').click(function (e) {
        var id = x;
        e.preventDefault();

        $("#Files").append("<input name='file' id='file" + id + "' type='file'/><br>");
        $("#rem").append("<input  value='remove' id='but" + id + "' type='button'/><br>");
        $("#but" + x).click(function () {
            $("#file" + id).add(this).remove();
        });

        x++;
    });

});

演示：Fiddle

但我建议使用基于事件委托的解决方案，如

$(document).ready(function () {
    var x = 0;
    $('#addmore').click(function (e) {
        e.preventDefault();

        $("#Files").append("<input name='file' id='file" + x + "' type='file'/><br>");
        $("#rem").append("<input  value='remove' id='but" + x + "' data-id='" + x + "' type='button'/><br>");

        x++;
    });
    $("#rem").on('click', 'input[value="remove"]', function () {
        var id = $(this).data('id');
        $("#file" + id).add(this).remove();
    });

});

演示：Fiddle

如何使用jquery删除字段？

1 个答案: