添加/删除多个输入jquery

Question

我有下面的代码

$(document).ready(function(){

    var input = '<p><input type="text" name="alternativas[]" /> <a href="#" class="remove"><img src="images/ico_excluir.gif" /></a></p>';

    $("input[name='add']").click(function( e ){
        $('#inputs').append( input );
    });

    $('#inputs').delegate('a','click',function(){
        $( this ).parent('p').remove();
    });

});

我在同一个页面中有很多表单

    <table width="100%" border="0" cellspacing="10" cellpadding="0" div="alter">
<form action="/teste/fono2014/admin/pesquisa_editar.php" method="get" enctype="multipart/form-data">
      <tr>
    <td colspan="2" align="center"><h3>QUESTION 1</h3></td>
    </tr>  
  <tr>
    <td width="30%" align="right">Question:</td>
    <td><input type="text" value="Where are you from?" /></td>
    </tr>

    <tr>
    <td align="right">Sequence:</td>
    <td><input name="ordem_pergunta" type="text" value="1" onkeypress='return SomenteNumero(event)' /></td>
    </tr>
        <tr>
    <td align="right">Alternatives:</td>
    <td><input type="button" name="add" value="Add" />
    <div id="inputs">
            <p><input type="text" name="alternativas[]" value="Brazil" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="EUA" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="Mexico" /> <a href="#" class="remove">Remove</a></p>
  </div>
</td>
    </tr>
        <tr>
    <td align="right">More than one?</td>
    <td><input name="inserir_varios" type="radio" value="S" checked>
      Yes <input name="inserir_varios" type="radio" value="N" >
      No</td>
    </tr>
    </form>
    <form action="/teste/fono2014/admin/pesquisa_editar.php" method="get" enctype="multipart/form-data">
      <tr>
    <td colspan="2" align="center"><h3>QUESTION 2</h3></td>
    </tr>  
  <tr>
    <td align="right">Question:</td>
    <td><input name="pergunta" type="text" value="How old are you?" /></td>
    </tr>

    <tr>
    <td align="right">Sequence:</td>
    <td><input name="ordem_pergunta" type="text" value="2" onkeypress='return SomenteNumero(event)' /></td>
    </tr>
        <tr>
    <td align="right">Alternatives:</td>
    <td><input type="button" name="add" value="Add" />
    <div id="inputs">
            <p><input type="text" name="alternativas[]" value="&lt; 18" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="&gt; 18" /> <a href="#" class="remove">Remove</a></p>
  </div>
</td>
    </tr>
        <tr>
    <td align="right">More than one?</td>
    <td><input name="inserir_varios" type="radio" value="S" checked>
      Yes <input name="inserir_varios" type="radio" value="N" >
      No</td>
    </tr>

    </form>
    <form action="/teste/fono2014/admin/pesquisa_editar.php" method="get" enctype="multipart/form-data">
      <tr>
    <td colspan="2" align="center"><h3>QUESTION 3</h3></td>
    </tr>  
  <tr>
    <td align="right">Question:</td>
    <td><input name="pergunta" type="text" value="Where do you live?" /></td>
    </tr>

    <tr>
    <td align="right">Sequence:</td>
    <td><input name="ordem_pergunta" type="text" value="3" onkeypress='return SomenteNumero(event)' /></td>
    </tr>
        <tr>
    <td align="right">Alternatives:</td>
    <td><input type="button" name="add" value="Add" />
    <div id="inputs">
            <p><input type="text" name="alternativas[]" value="New York" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="San Diego" /> <a href="#" class="remove">Remove</a></p>
  </div>
</td>
    </tr>
        <tr>
    <td align="right">More than one?</td>
    <td><input name="inserir_varios" type="radio" value="S" >
      Yes <input name="inserir_varios" type="radio" value="N" checked>
      No</td>
    </tr>
    </form>
</table>

当我单击添加代码时，只需在第一个 div 上添加新输入。 我能做什么？

我不知道我能做什么，我不太了解 jquery。我想在每个表单的 id 上放置一个随机变量，然后“添加”按钮获取这个 id，但我不知道该怎么做。

Answer 1

尝试使用类而不是 id #inputs。 ID 仅在页面中存在一次。 Jquery 使用document.getElementById() 检索将返回包含该id 的第一个元素的dom 元素。您可以多次使用相同的类名。如果您将 inputs 类添加到 div 并使用选择器 .inputs 您应该得到所需的结果。

您可以更改您的 jquery 以追加到正确的 div 如下（看起来添加按钮总是在您要添加到的 div 之前）：

$("input[name='add']").click(function( e ){
    $(this).next().append( input );
});

这样，您甚至不需要引用类。它会在添加按钮之后将输入添加到 div 中。

Answer 2

要将代码应用于 name = 'add' 的所有表单字段，您需要删除 '' 并尝试这样

$("[name=add]")

如果您只想应用第一个元素，请尝试如下所示，

$("#add")

i.e) $("[name=add]").click();  &   $("#add").click()

与所有输入字段都相同

$('input').append()  

为了有特定的输入，有共同的虚拟类并像下面这样分配它

$('.classname').append()

Answer 3

我用jQuery 2.0.2写了一个例子。

这是我写的一个 jsfiddle 示例：这里有一个链接：http://jsfiddle.net/tLXtd/

一段代码：

 $('#addInput').click(function() {

                $('<p><label for="myInput"><input type="text" id="myInput_' + i +'" size="20" name="myInput' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remInput" onclick="removeMe('+ i +')">Remove</a> ').appendTo(myDiv);
                i++;
                return false;
        });


    removeMe = function(id){

        if( i > 2 ) {
           $('#myInput_'+id).parents('p').remove();

            i--;
        }
        return false;
    }