2

我创建了一个表单，可以选择动态添加字段，并提供来自http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/的出色代码帮助。唯一的问题是我希望生成字段而不显示新的“添加”和“删除”按钮。我该怎么做呢？我可以通过在字段下方显示带有新按钮的按钮来使其工作，<div>但我希望它们位于字段的右侧。

<script type="text/javascript">

        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children(':first')
                    .attr('id', 'device' + newNum)
                    .attr('name', 'device' + newNum);
                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');

                if (newNum == 3)
                    $('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length;

                $('#input' + num).remove();
                $('#btnAdd').attr('disabled','');

                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });

            $('#btnDel').attr('disabled','disabled');
        });
    </script>


    <div> Name: <input type="text" name="name" id="name" /></div>
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
    Device(s):  <input type="text" name="device1" id="device1" />
    <input type="button" id="btnAdd" value="Add" />
    <input type="button" id="btnDel" value="Remove" />
     </div>
4

3 回答 3

0

将此行添加到您的代码中：

newElem.find('input[type="button"]').remove();

见小提琴：http: //jsfiddle.net/534T9/

于 2013-06-28T15:06:07.987 回答
0

好吧，您正在克隆整个 div，其中包含两个按钮。所以你必须删除这两个。这是小提琴：http: //jsfiddle.net/5GF3A/

我添加了这个：

newElem.find(":button").remove();
于 2013-06-28T15:07:18.920 回答
0 
<html>

<body>
 <div> Name: <input type="text" name="name" id="name" /></div>
 <div style="float:left;">
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
        Device(s):  <input type="text" name="device1" id="device1" />
    </div>
 </div>
 <div style="float:left;">
    <input type="button" id="btnAdd" value="Add" />
    <input type="button" id="btnDel" value="Remove" />
 </div>
 <div style="clear:both;"></div>

<script type="text/javascript "src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            var _getNum = function() {
                return $('.clonedInput').length;
            }
            var _updateButtons = function() {
                var num     = _getNum();
                $('#btnDel').attr('disabled', num <= 1 ? 'disabled' : false);
                $('#btnAdd').attr('disabled', num >= 3 ? 'disabled' : false);
            }
            $('#btnAdd').click(function() {
                var num     = _getNum();
                var newNum  = num + 1;

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children(':first')
                    .attr('id', 'device' + newNum)
                    .attr('name', 'device' + newNum);
                $('#input' + num).after(newElem);
                _updateButtons();
            });

            $('#btnDel').click(function() {
                var num     = _getNum();
                $('#input' + num).remove();
                _updateButtons();
            });

            _updateButtons();
        });
</script>

</body>
</html>
于 2013-06-28T15:34:54.153 回答