Question

所以我有以下HTML。这个想法是，默认情况下，用户可以输入2个团队，但他们应该有一个选项来添加更多。我添加New Team功能完美无缺 -

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

我正在努力如何为此添加“删除”按钮和jQuery。

所有帮助非常感谢！

 <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>

动态添加和删除<input /> jQuery

5 个答案: