动态添加文本框和文本区域

Question

需要动态地将textbox和textarea添加到我的某个表单中。我发现这个例子适用于动态添加文本框。

的Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
</div>

结果

我尝试添加textarea

$(wrapper).append('<div><textarea name="desc[]"></textarea></div><a href="#" class="remove_field">Remove</a></div>');

到上面的javascript

和HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></div>
    <div><textarea name="desc[]"></textarea></div>
</div>

但事实证明这是错误的。我应该如何在文本框中添加textarea？

错误

允许的最大限制为10.假设我添加了6个这些字段，然后决定使用其中的5个。如果，我删除了最后一个（在这种情况下为第6个），所有这些都被删除了。

修改

链接到上面的代码https://jsfiddle.net/x6krv00u/

**我对javascripts不太了解。**

Answer 1

我认为你这样做

$(wrapper).append('<div><input type="text" name="mytext[]"/><textarea name="desc[]"></textarea></div><a href="#" class="remove_field">Remove</a></div>');

以下情况应该有效

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    $(this).parent().remove(); // you cannot pass 'div' in parent()
});

Answer 2

input和textarea没有相同的父级。这就是造成这个问题的原因。

这应该是DOM结构：

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div>
        <input type="text" name="mytext[]"><br>
        <textarea name="desc[]"></textarea>
    </div>
</div>

当然，<br>是可选的。您可能应该使用CSS进行格式化。

以下是添加input - textarea对的方法：

$(wrapper).append('<div>' +
    '<input name="mytext[]"><br>' +
    '<textarea name="desc[]"></textarea>' +
    '<a href="#" class="remove_field">Remove</a>' +
'</div>');

这是一个可以复制粘贴的工作示例：

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div>
        <input type="text" name="mytext[]"><br>
        <textarea name="desc[]"></textarea>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div>' +
                '<input name="mytext[]"><br>' +
                '<textarea name="desc[]"></textarea>' +
                '<a href="#" class="remove_field">Remove</a>' +
            '</div>');
    }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});
</script>

希望这有帮助。

PS：我尝试对您的代码进行微小的更改。还有其他（更好的）方法来完成你想要的东西。

修改0：改进了格式。