0

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

我正在使用 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>
4

1 回答 1

0

你<br/>是这里的问题。您继续添加它们但不删除它们。

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

与其处理可能非常痛苦的剩余<br/>元素，不如根本不要使用它们。

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

删除了初始的更改后的 HTML <br/>：

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

CSS：

#textboxes > input{
    display: block;
}

更改后的脚本，删除了额外的<br/>：

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

演示- 不要添加<br/>元素，而是使用 CSS 进行样式设置

于 2013-04-07T23:24:06.493 回答