0 
<html>
    <head>
        <script src="jquery-1.10.2.min.js"></script>
        <script>
            function AddingTextBoxes() {
                var NumOfText=$("#NumOfTextBoxes").val();
                $('#NewlyCreatedSelectBoxes').find('input').remove();
                for (i = 0; i < NumOfText; i++) {
                    var txtBox = "<input type='text' name='textbx[]'/><br>"
                    $('#NewlyCreatedSelectBoxes').append(txtBox);
                }
                return false;
            }
        </script>
    </head>

    <body>
        <form>
            <div id="PHPForms">
                <!--Designing PHP forms dynamically-->
                <label>Form Heading</label>
                <input type="text" />
                <br>
                <br>
                <label>Number of text boxes would needed</label>
                <input id="NumOfTextBoxes" type="text" />
                <button onclick=" return AddingTextBoxes()">Click</button>
                <div id="NewlyCreatedSelectBoxes" name="Texty"></div>
            </div>
        </form>
    </body>
</html>

在这段代码中，虽然我能够在再次输入值时创建动态文本框，但下一组文本框在有空格后创建。我怎样才能避免这种情况？它是 HTML、JQuery、JavaScript 的组合代码。

4

1 回答 1

0

空白的原因是因为您的函数中的这一行：

$('#NewlyCreatedSelectBoxes').find('input').remove();

input上面的行仅从DIV中删除元素NewlyCreatedSelectBoxes并留下<br>导致空白的标签。

您可以简单地使用.empty()从选定元素中删除所有子节点。

您要做的就是将上面的行替换为

$('#NewlyCreatedSelectBoxes').empty();

这是一个工作演示

于 2013-09-11T17:35:33.310 回答