Javascript 动态添加textbox和textarea

需要将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>

$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

HTML

<div class="input_fields_wrap">
    <button class="add_field_button">Add More Fields</button>
    <div><input type="text" name="mytext[]"></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 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>

我尝试添加一个文本区域

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

$（包装器）.append（“”）；

到上面的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>

添加更多字段

但事实证明这是错误的。如何在文本框中添加文本区域

错误

允许的最大限制为10。假设我添加了6个字段，然后决定使用其中的5个。如果我删除最后一个（本例中为第6个），则所有这些文件都将被删除

编辑

链接到上述代码

---

**我对Java脚本了解不多。**

我想你是这样做的

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

---

输入

和

文本区域

没有相同的父项。这就是问题的根源

这应该是DOM结构： 下面是一个工作示例，您可以复制粘贴：

添加更多字段


$（文档）.ready（函数（）{
var max_fields=10；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=1；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x”+
'' +
'' +
'');
}
});
$（包装器）。在（“单击“，”.remove_字段）上，函数（e）{//用户单击remove text
e、 preventDefault（）；$（this）.parent（'div'）.remove（）；x--；
})
});

希望这有帮助

PS:我已尝试对您的代码进行最小的更改。还有其他（更好的）方法来实现你想要的

---

---

编辑0:改进格式。

您得到了什么错误/输出？@DishaV.，单击“删除”链接，所有文本区域和文本框将消失，因为它应该只删除需要删除的文本。@DishaV.，允许的最大限制为10。假设我添加了6个字段，然后决定使用其中的5个。如果，我删除最后一个（本例中是第6个），则它们都将被删除在您的示例中没有parent div each adding框，因此您可以通过

$（this）.prev（）.remove（）删除；$（this.prev（）.remove（）；$（this.remove（）（）是的，我添加了$（包装器）行；在$（包装器）之后追加（“”）；并尝试了您的代码，但问题仍然存在。@RnD我编辑了您的链接，请告诉我是否有效检查@Minato，宾果！我是编辑一样的，你更快@RnD您需要做的就是将父div添加到您的
remove
@DishaV。我不是一个很好的设计师。。因此，链接位于
textarea
之后，而不是在其一侧：P。。。因此，如果您将其包含在
文本区域
div
中，请确保在grandparent:P上调用
remove
。。i、 e.
$（this.parent（）.parent（）.remove（）@DishaV：移除祖父母就可以了。我已经发布了一个有效的解决方案。
<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>

$(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>