Question

<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的组合。

Answer 1

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

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

上述行只会删除DIV input中的NewlyCreatedSelectBoxes元素，并保留导致空格的<br>标记。

您只需使用.empty() 从所选元素中删除所有子节点。

您需要做的是用

替换上面的行

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

Here is a working demo

创建动态文本框时，空间在创建下一组动态文本框集时始终分配

1 个答案: