动态添加和删除<input> jQuery

Question

所以我有以下 HTML。这个想法是默认情况下用户可以输入 2 个团队，但他们应该可以选择添加更多。 我添加新团队 function 完美运行 -

我想要做的是允许用户删除他们添加的输入。 所以他们可以

我有点挣扎如何 append 一个“删除”按钮和 jQuery 。

这是一个jsFiddle http://jsfiddle.net/sqn9Y/

非常感谢所有帮助！

 <div class="control-group">
    <div id="teamArea"class="controls">
      <input type="text" name="teamName[]">
      <input type="text" name="teamName[]">
    </div>
   <a id="addNewTeam">Add another</a>
 </div>


 $("#addNewTeam").click(function(e) {
    //Append new field
    e.preventDefault();
    var newField = $('#teamArea input:first').clone();
    newField.val("");
    $("#teamArea").append(newField);
  });

Answer 1

这是一个入门的基本示例：

$("#addNewTeam").click(function(){
    var elem = $("<input/>",{
        type: "text",
        name: "teamName[]"
    });

    var removeLink = $("<span/>").html("X").click(function(){
        $(elem).remove();
        $(this).remove();
    });

    $("#teamArea").append(elem).append(removeLink);
});

JS小提琴： http ： //jsfiddle.net/at6f9/

Answer 2

添加删除链接以删除最后添加的元素。 请参考以下链接

http://jsfiddle.net/sqn9Y/4/

$("#remove").click(function(e){
if($('#teamArea input').length>1) {//remove all except one
     $('#teamArea input:last').remove();
}
});

Answer 3

检查下面的小提琴

http://jsfiddle.net/sqn9Y/3/

$("#addRemoveTeam").click(function(e) {

   e.preventDefault();
   var newField = $('#tag_' + tagCount);
   tagCount--;
  newField.remove();
});

Answer 4

这将删除最后一个。类似地，如果您想删除所有输入，只需循环运行即可。希望这会有所帮助。 在这里输入代码将删除最后一个。类似地，如果您想删除所有输入，只需循环运行即可。希望这会有所帮助。

<div class="control-group">
<div id="teamArea"class="controls">
<input type="text" name="teamName[]">
<input type="text" name="teamName[]">
</div>
<a id="addNewTeam">Add another</a>
<a id="removeNewTeam">Add another</a>
</div>

$("#addNewTeam").click(function(e) {
//Append new field
e.preventDefault();
var newField = $('#teamArea input:first').clone();
newField.val("");
$("#teamArea").append(newField);
});
$("#removeNewTeam").click(function(e) {
var currentChildren=$("#teamArea").children();
var currentChidlrenLength=currentChildren.length;
$("#teamArea").children()[currentChidlrenLength-1].remove()
});

Answer 5

关于您想要的东西，有些事情我不清楚。 您是否要在底部的“删除”按钮和“添加”按钮？ 您是否只希望为所有新添加的输入字段添加一个删除按钮？

假设这两个问题的答案都是“是”，并且您希望“删除”按钮以与输入相反的顺序删除输入，那么我能想到的最简单的想法是隐藏/显示“删除”按钮。

示例代码（包括您的代码）为：

HTML

 <div class="control-group">
    <div id="teamArea"class="controls">
      <input type="text" name="teamName[]">
      <input type="text" name="teamName[]">
    </div>
   <a id="addNewTeam">Add another</a>
   <a id="removeLastTeam" style="display:none;">Remove Last</a>

JavaScript的

$("#addNewTeam").click(function(e) {
    //Append new field
    e.preventDefault();
    var newField = $('#teamArea input:first').clone();
    newField.val("");
    $("#teamArea").append(newField);
  });

$('#removeLastTeam').click(function() {
    if ($('div.controls').find('input').length > 2)
    {
        $("#teamArea input:last-child").remove();
    }
});

$('.control-group').click(function(e) {

    if ($('div.controls').find('input').length > 2)
    {
        $('#removeLastTeam').show();
    }
});

 </div>

Answer 6

我想扩展上面凯文斯非常简洁的例子，例如你想限制用户可以添加的输入字段的数量。 您可以添加一个简单的计数器来帮助您实现目标。

在我的示例中，我正在构建一个表单，如果用户有不止一只狗，该表单将允许用户添加多个输入名称。

    var counter = 0
    jQuery(function () {
      $(".newDog").click(function(){
        counter ++;
        if (counter < 4) {
          var elem = $("<input/>",{
            type: "text",
            name: `dogname${counter}`
        });
        } else {
          alert("You can only add 4 Dog Names")
        }
        
        var removeLink = $("<span/>").html("X").click(function(){
            $(elem).remove();
            $(this).remove();
            counter --;
        });
        
        $(".dogname-inputs").append(elem).append(removeLink);
    });
    })

https://stackoverflow.com/users/714969/kevin-bowersox提到的完全信用