如何使用 jQuery 添加带有行的删除和添加按钮

嗯，问题很酷。 :)这是解决方案。

网页标记

<div class="formContainer">
    <div class="row">
        <div class="flt">
            <select name="items" id="items">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt"><textarea name="description" id="description"></textarea></div>
        <div class="flt"><input type="text" name="unitprice" id="unitprice" /></div>
        <div class="flt"><input type="text" name="quantity" id="quantity" /></div>
        <div class="flt">
            <select name="firsttax" id="firsttax">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt">
            <select name="secondtax" id="secondtax">
                <option value="1">1</option>
            </select>
        </div>
        <div class="flt"><input type="text" name="linetotal" id="linetotal" readonly /></div>
        <div class="flt"><input type="button" class="addRow" name="addRow" value="+" /></div>
        <div class="flt"><input type="button" class="removeRow" name="removeRow" value="-" /></div>
        <div class="clr"></div>
    </div>
</div>

.CSS

.fieldRow {
        margin-bottom: 20px;
        overflow: hidden;
    }
    .fieldRow .field {
        float: left;
        margin: 0 10px 0 0;
    }
    .fieldRow select.field {
        padding: 1px;
    }
    .buttonHolder {
        border-top: solid 5px #ccc;
        padding: 10px;
    }
    #template .button.remove {
        display: none;  
    }

和JavaScript：

$(function(){
    var rowItem = $(".row");
    $(".formContainer").on("click", ".addRow", function(){
        var newItem = rowItem.clone(),
            rowIndex = $(".row").length;
        $(":input", newItem).each(function(c, obj){
            $(obj).attr("id", $(obj).attr("name") + rowIndex);
        });
        //$(this).parent().parent().after(newItem); // adds just after the current line
       $(".formContainer").append(newItem); // adds At the end of the container
    })
    .on("click", ".removeRow", function(){
        if($(".row").length > 1){
            $(this).parents(".row").remove();
        }
    });
});

有两种方法可以添加行：

1. 如果要在当前行之后添加
2. 如果要在窗体末尾添加行

两者都在上面的JS中，（一个是评论的）

这是工作演示：http://jsfiddle.net/ashishanexpert/8pJ4P/1/

如果你喜欢动画，你可以看看这个：http://jsfiddle.net/ashishanexpert/8pJ4P/4/

像这样的事情怎么样：

jQuery(document).on("ready", function() {
  initAddRows();
});
function initAddRows() {
  var template = jQuery("#template"),
      dataRows = jQuery("#dataRows");
  jQuery("#btnAdd").on("click", function() {
    var newRow = template.clone(true, true),
        fieldRows = dataRows.find(".fieldRow");
    newRow.attr('id', 'row' + (fieldRows.length + 1)).find('[id]').each(function() {
      jQuery(this).attr("id", jQuery(this).attr("id") + (fieldRows.length + 1));
    });
    fieldRows.filter(":last").after(newRow);
  });
  dataRows.on("click", ".remove", function() {
    jQuery(this).parent().remove();
  });
}

	.fieldRow {
	  margin-bottom: 20px;
	  overflow: hidden;
	}
	
	.fieldRow .field {
	  float: left;
	  margin: 0 10px 0 0;
	}
	
	.fieldRow select.field {
	  padding: 1px;
	}
	
	.buttonHolder {
	  border-top: solid 5px #ccc;
	  padding: 10px;
	}
	
	#template .button.remove {
	  display: none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dataRows">
  <div class="fieldRow" id="template">
    <select class="items field" name="items" id="items" disabled="disabled">
      <option value="1" selected="selected">Value</option>
      <option value="1"></option>
      <option value="1"></option>
    </select>
    <textarea name="description" id="description" class="description field"></textarea>
    <input type="text" name="unitprice" id="unitprice" class="unitprice field">
    <input type="text" name="quantity" id="quantity" class="quantity field">
    <select name="firsttax" id="firsttax" class="field">
      <option value="1" selected="selected">Value</option>
    </select>
    <select name="secondtax" id="secondtax" class="field">
      <option value="1" selected="selected">Value</option>
    </select>
    <input type="text" name="linetotal" id="linetotal" class="linetotal field" placeholder="0.00" readonly>
    <input type="button" class="button remove" id="btnDel" value="Remove Row" />
  </div>
</div>
<div class="buttonHolder">
  <input type="button" class="button add" id="btnAdd" value="Add Row" />
</div>