Question

我正在创建一个包含动态添加和删除文本框的表单。

我正在使用jQuery 1.9.1。我是jQuery的新手，所以我查了一些例子，找到了一个使用jQuery 1.4的例子我做了一些更改，并使用jQuery 1.9.1，但我有一个问题。

当用户添加几个框时，然后将它们删除为只有一个，然后再添加一个，就好像空的空间被占用一样，并将新的一个向下添加到下面，而不是在最后一个之后一。

我不明白是什么原因导致空白空间，但看起来很糟糕，所以我想找一个修复。

以下是完整的代码，您可以复制并粘贴它以查看我在说什么：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var counter = 2;
        $("#addButton").click(function() {
            $("#textboxes").append('<input type="text" name="text' + counter + '" id="text' + counter + '"><br/>');
            counter++;
        })

        $("#removeButton").click(function() {
            if (counter == 1) {
                alert("No more textbox to remove");
                return false;
            }
            counter--;
            $("#text" + counter).remove();
        });

        $("#submitButton").click(function() {
            var msg = '';
            for (i = 1; i < counter; i++) {
                msg += "\n Textbox #" + i + " : " + $('#text' + i).val();
            }
            alert(msg);
        });
    });
</script>
<div style="width: 800px; margin: auto; padding-top: 100px;">
    <form id="form" name="form">
        <div id="textboxes">
            <input type="text" name="text1" id="text1">
            <br/>
        </div>
        <input type="button" value="Add a field" class="add" id="addButton" />
        <input type="button" value="Remove a field" class="add" id="removeButton" />
        <input type="button" value="Submit" class="add" id="submitButton" />
    </form>

Answer 1

您的 是问题所在。你继续添加它们但不删除它们。

查看您的HTML源代码，您会看到剩余的 元素，这就是您看到不断增加的行间距的原因。

而不是处理剩余的 元素，这可能非常痛苦，根本不使用它们。

删除所有 元素并使用CSS确保输入换行，类似于：

已删除的初始 已更改的HTML：

<div id="textboxes">
    <input type="text" name="text1" id="text1">
</div>

CSS：

#textboxes > input{
    display: block;
}

更改后的脚本，删除了其他 ：

$("#addButton").click(function () {
    $("#textboxes").append('<input type="text" name="text' + counter + '" id="text' + counter + '">');
    counter++;
})

DEMO - 请勿添加 元素并使用CSS代替样式

追加（）＆amp;删除（）文本框，创建不需要的空白区域

1 个答案: