Javascript 使用jQuery添加字段和删除字段

我有以下代码：

我希望能够从一个输入框开始，完成选择字段和删除按钮，并能够动态删除它们和添加更多

这是我找到并试图修改的JavaScript jQuery：

$(document).ready(function() {

var MaxInputs       = 8; //maximum input boxes allowed
var InputsWrapper   = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton       = $("#addfield"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added

$(AddButton).click(function (e)  //on add input button click
{
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++; //text box added increment
            //add input box
            $(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>');
            x++; //text box increment
        }
return false;
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
        if( x > 1 ) {
                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
        }
return false;
}) 

});

$（文档）.ready（函数（）{
var MaxInputs=8；//允许的最大输入框数
var InputsWrapper=$（“#InputsWrapper”）；//输入框包装器ID
var AddButton=$（“#addfield”）；//添加按钮ID
var x=inputswraper.length；//initlal文本框计数
var FieldCount=1；//跟踪添加的文本框
$（添加按钮）。单击（函数（e）//在添加输入按钮上单击
{
if（x1）{
$（this）.parent（'div'）.remove（）；//删除文本框
x--；//减量文本框
}
返回false；
}) 
});

---

它似乎不适用于添加或删除输入框，而且似乎也没有给出任何错误来说明原因

这不起作用的原因是因为有两个变量

InputsWrapper

和

AddButton

。这两个变量都为null，因为没有任何HTML将

InputsWrapper

或

AddField

作为ID属性

以下是更正后的HTML：

<h1>Questions</h1>
<p>Add additional questions. You can select how long you would like the reply to be.   </p>
<div id="InputsWrapper">
    <input value="Why do you want this">
    <select>
        <option value="single">Single line reply</option>
        <option value="multi">Paragraph reply</option>
    </select>
    <button>Delete</button>
</div>
<button id="addfield">Add question</button>

问题
添加其他问题。您可以选择希望回复的时间

单行回复
段落答复
删除
添加问题

---

您没有在

html元素中添加
id
，在页面中添加
jquery
，请尝试以下操作

HTML

<h1>Questions</h1>
<p>Add additional questions. You can select how long you would like the reply to be.</p>
<div class="add-row">
    <input value="Why do you want this" />
    <select>
        <option value="single">Single line reply</option>
        <option value="multi">Paragraph reply</option>
    </select>
    <button class="remove">Delete</button>
</div>
<br />
<button id="addfield">Add question</button>
<br />


自
var AddButton=$（“#addfield”）以来更新你有，你不需要使用$（AddButton）。。。。只需添加按钮就可以…像这样？是的，一模一样that@Jimmy然后你的代码就完全好了，你只需要修改你的html，看看下面的答案。
$(document).ready(function () {
    $('#addfield').on('click', function(){
        $clone=$('.add-row:first').clone();
        $clone.insertAfter($('.add-row:last'));
    });
    $(document).on("click",".remove", function(e){ //user click on remove text
        if( $('.add-row').length > 1 ) {
                $(this).closest('div.add-row').remove(); //remove entire row
        }
        return false;
    }); 
});