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 に答える