使用jquery动态添加字段

时间：2014-04-25 10:23:47

标签： javascript jquery html

我有这个现有的代码，我有一些帮助：http://jsfiddle.net/975VQ/11/

此代码的问题是我也想让他们删除原始字段。我无法删除原始文本字段，仍然添加另一个。

有人可以告诉我如何解决这个问题吗？我认为这将是通过使用javascript添加第一个条目，然后使用javascript每次添加标记而不是克隆它。

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;
})

任何有关此的帮助或意见都可以使用。

5 个答案:

答案 0 :(得分：2)

您正在原始字段上删除id = InputsWrapper的字段，即您正在接收新闻字段的div。

您需要将原始字段放在其他div中。

<div id="InputsWrapper">
    <div>
         <input value="Why do you want this">
         <select>
             <option value="single">Single line reply</option>
             <option value="multi">Paragraph reply</option>
         </select>
         <button class="removeclass">Delete</button>
    </div>
</div>

答案 1 :(得分：1)

检查此jsfiddle 

 <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 class="removeclass">Delete</button>
 </div>
 <br />
 <button id="addfield">Add question</button>
 <br />

的javascript 

  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;
    })

答案 2 :(得分：1)

试试这个

HTML 

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

的Javascript 

    var MaxInputs       = 8; //maximum input boxes allowed
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
            $(".que").append('<div class="InputsWrapper"><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   

                $(this).parent('div').remove(); //remove text box
                x--; //decrement textbox
return false;
})

DEMO

答案 3 :(得分：1)

尝试这个小提琴，这就是你需要的

http://jsfiddle.net/975VQ/20/

HTML：

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

<button class="removeclass">Delete</button>
</div>
    <div id="InputsWrapper"></div>
<br />
<button id="addfield">Add question</button>
<br />

JS：

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
            $('<div><input type="text" name="mytext[]" id="field_'+ FieldCount +'" value="Text '+ FieldCount +'"/><button class="removeclass">Delete</button></div>').insertBefore(InputsWrapper);
            x++; //text box increment
        }
return false;
});

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

答案 4 :(得分：1)

如果我理解的话，这个jsfiddle应该是你想要的，

HTML：

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

使用Javascript：

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
    }
    if(FieldCount == 2 && x > 1)
    {
        $("#InputsWrapper div").first().remove();
    }
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;
})
相关问题
最新问题