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上放一个随机变量，按钮“Add”得到这个id，但我不知道怎么做。

Answer 1

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

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

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

这样，你甚至不需要一个类来引用。它会在添加按钮后将输入添加到div。

Answer 2

要将代码应用于名称='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;
    }

添加/删除多个输入jquery

3 个答案: