动态添加和删除<input> jQuery

Question

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

我正在尝试做的是允许用户删除他们添加的输入。这样他们就可以

我有点挣扎着如何添加一个“删除”按钮和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/