Fatal编程技术网
  • javascript/
  • Javascript 使用jQuery动态添加或删除输入框

Javascript 使用jQuery动态添加或删除输入框

javascript jquery html

Javascript 使用jQuery动态添加或删除输入框,javascript,jquery,html,Javascript,Jquery,Html,在我的例子中，问题是我可以动态添加/删除输入框，但问题是当我手动添加一组输入框并删除按钮，而不是按add按钮创建一个输入框时，它无法删除它 是否可以有3组输入框，但有2个删除按钮 谢谢你的帮助 $（文档）.ready（函数（）{ $（“#添加”）。单击（函数（）{ var intId=$（“#buildyourform div”）.length+1； 变量标签=$（“字段名”）； 变量labelType=$（“字段类型”）； var labelReq=$（“要求”）； var labelT

在我的例子中，问题是我可以动态添加/删除输入框，但问题是当我手动添加一组输入框并删除按钮，而不是按add按钮创建一个输入框时，它无法删除它

是否可以有3组输入框，但有2个删除按钮

谢谢你的帮助


$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
var intId=$（“#buildyourform div”）.length+1；
变量标签=$（“字段名”）；
变量labelType=$（“字段类型”）；
var labelReq=$（“要求”）；
var labelTag=$（“标签”）；
var fieldWrapper=$（“”）；
变量fName=$（“”）；
var fTag=$（“”）；
var fReq=$（“CheckedYesNo”）；
var fType=$（“checkedText段落”）；
var removeButton=$（“”）；
移除按钮。单击（函数（）{
$（this.parent（）.remove（）；
});
fieldWrapper.append（标签）；
fieldWrapper.append（fName）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelType）；
fieldWrapper.append（fType）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelReq）；
fieldWrapper.append（fReq）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelTag）；
fieldWrapper.append（fTag）；
fieldWrapper.append（“
”）；
fieldWrapper.append（removeButton）；
$（“#buildyourform”）.append（fieldWrapper）；
});
});
建立你自己的形式！
字段名

字段类型
选中文本段落
需要
选中的
是的没有

标签
加载文档时，尝试设置删除按钮操作

或者使用下面的代码

<script>
$(document).ready(function() {
    $('.remove').click(function(){
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var label = $("<label>Field Name</label>");
        var labelType = $("<label>Field Type</label>");
        var labelReq = $("<label>Require</label>");
        var labelTag = $("<label>Tag</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
        var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>



</head>
<body>

<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>


<!-- I manually create  a set of input box here -->

        <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>


<!-- I manually create a set of input box here -->




    <input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>​


$（文档）.ready（函数（）{
$（'.remove'）。单击（函数（）{
$（this.parent（）.remove（）；
});
$（“#添加”）。单击（函数（）{
var intId=$（“#buildyourform div”）.length+1；
变量标签=$（“字段名”）；
变量labelType=$（“字段类型”）；
var labelReq=$（“要求”）；
var labelTag=$（“标签”）；
var fieldWrapper=$（“”）；
变量fName=$（“”）；
var fTag=$（“”）；
var fReq=$（“CheckedYesNo”）；
var fType=$（“checkedText段落”）；
var removeButton=$（“”）；
移除按钮。单击（函数（）{
$（this.parent（）.remove（）；
});
fieldWrapper.append（标签）；
fieldWrapper.append（fName）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelType）；
fieldWrapper.append（fType）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelReq）；
fieldWrapper.append（fReq）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelTag）；
fieldWrapper.append（fTag）；
fieldWrapper.append（“
”）；
fieldWrapper.append（removeButton）；
$（“#buildyourform”）.append（fieldWrapper）；
});
});
建立你自己的形式！
字段名

字段类型
选中文本段落
需要
选中的
是的没有

标签

​
加载文档时，尝试设置删除按钮操作

或者使用下面的代码

<script>
$(document).ready(function() {
    $('.remove').click(function(){
        $(this).parent().remove();
    });

    $("#add").click(function() {
        var intId = $("#buildyourform div").length + 1;
        var label = $("<label>Field Name</label>");
        var labelType = $("<label>Field Type</label>");
        var labelReq = $("<label>Require</label>");
        var labelTag = $("<label>Tag</label>");
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<input type=\"text\" name=\"inputName[]\" class=\"required\" />");
        var fTag = $("<input type=\"text\" name=\"inputTag[]\" class=\"required\" />");
        var fReq = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"1\">Yes</option><option value=\"0\">No</option></select>");
        var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"Remove\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });

        fieldWrapper.append(label);
        fieldWrapper.append(fName);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelType);
        fieldWrapper.append(fType);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelReq);
        fieldWrapper.append(fReq);
        fieldWrapper.append('<br>');
        fieldWrapper.append(labelTag);
        fieldWrapper.append(fTag);
        fieldWrapper.append('<br>');
        fieldWrapper.append(removeButton);
        $("#buildyourform").append(fieldWrapper);
    });
});

</script>



</head>
<body>

<form id="config" method="post" action="config.php" >
<fieldset id="buildyourform">
    <legend>Build your own form!</legend>


<!-- I manually create  a set of input box here -->

        <div class="fieldwrapper" id="field1"><label>Field Name</label><input type="text" name="inputName[]" class="required"><br><label>
Field Type</label><select class="fieldtype">
<option value="checkbox">Checked</option><option value="textbox">Text</option><option value="textarea">Paragraph</option></select><br><label>Require</label>
<select class="fieldtype"><option value="checkbox">Checked</option>
<option value="1">Yes</option><option value="0">No</option></select><br><label>
Tag</label><input type="text" name="inputTag[]" class="required"><br><input type="button" class="remove" value="Remove"></div>


<!-- I manually create a set of input box here -->




    <input type="text" name="input[]" value="test">
</fieldset>
<input type="button" value="Add a field" class="add" id="add" />
<input type="submit" value="Submit">


</form>

</html>​


$（文档）.ready（函数（）{
$（'.remove'）。单击（函数（）{
$（this.parent（）.remove（）；
});
$（“#添加”）。单击（函数（）{
var intId=$（“#buildyourform div”）.length+1；
变量标签=$（“字段名”）；
变量labelType=$（“字段类型”）；
var labelReq=$（“要求”）；
var labelTag=$（“标签”）；
var fieldWrapper=$（“”）；
变量fName=$（“”）；
var fTag=$（“”）；
var fReq=$（“CheckedYesNo”）；
var fType=$（“checkedText段落”）；
var removeButton=$（“”）；
移除按钮。单击（函数（）{
$（this.parent（）.remove（）；
});
fieldWrapper.append（标签）；
fieldWrapper.append（fName）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelType）；
fieldWrapper.append（fType）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelReq）；
fieldWrapper.append（fReq）；
fieldWrapper.append（“
”）；
fieldWrapper.append（labelTag）；
fieldWrapper.append（fTag）；
fieldWrapper.append（“
”）；
fieldWrapper.append（removeButton）；
$（“#buildyourform”）.append（fieldWrapper）；
});
});
建立你自己的形式！
字段名

字段类型
选中文本段落
需要
选中的
是的没有

标签

​
这是一个使用模板的好例子，因为它使洞的东西更易于维护，而不是用JavaScript创建整个表单
div

实时代码：

HTML 

建立你自己的形式！
添加字段
字段名
字段类型
选中的
正文
段落
要求
选中的
对
不
标签
去除
jQuery 
$（函数（）{
$（“.btn添加”）。单击（函数（）{
addField（）；
});
$（“.btn remove”）.live（“单击”，函数（）{
$（this）.closest（.fieldwrapper”）.slideUp（“slow”，function（）{
$（this.remove（）；
clearRemove（）；
});
});
//添加第一个字段
addField（）；
});
函数addField（）{
变量i=$（“.fieldwrapper”）.length；
$（“#字段模板”）.tmpl（{Id:i}）.appendTo（“#字段”）；
clearRemove（）；
}
函数clearRemove（）{
//隐藏除最后一个按钮之外的所有“删除”按钮，这样我们就不会
//多个ID…或使用计数器保持ID唯一。
如果（$（“.fieldwrapper”）.length>1）{
$（“.btn remove:last”）.show（）；
$（“.btn remove:not（：last）”）.hide（）；
} 
其他的
$（“.btn remove”）.hide（）；
}
这是一个使用模板的好例子，因为它使洞的东西更易于维护，而不是用JavaScript创建整个表单
div

实时代码：

HTML 

建立你自己的形式！
添加字段
字段名
五