从DIV中删除元素，以及先前插入的值问题

Question

我之前遇到问题在页面中克隆了一些HTML我现在使用下面的JS Fiddle解决了这个问题：

HTML:

<div id='1'>
    <div class="template"> <!-- mark a clone target -->
        ...
    </div>
    <div>
        <input type="button" name="addNewRow" value="Add Row" />
    </div>
</div>
JS:

var $template = $('.template');
$('input[type=button]').click(function() {
    $template.clone().insertAfter($template);
});

演示：http://jsfiddle.net/VcBrz/

编辑**我克隆和清除​​文本框的第一个问题已经解决了。

如果您参考上面的JSFiddle - 每次在表单上单击按钮时都会添加一个新行。 我希望添加另一个按钮来实现完全相反的效果，因此可以在按钮点击时删除行，并且想知道是否有人可以提出答案？

Answer 1

尝试以下

var $template = $('.template');
$('#add').click(function() { // where add is the id of add button
 $template.clone().insertAfter($template).find("input:text").val("");
});
$('#remove').click(function() { // where remove is the id of remove button
if($('.template').length>1)
 $('.template').last().remove();
});

检查此JSFiddle

Answer 2

Check this fiddle

var $template = $('.template');
$('input[type=button]').click(function() {
    $template.clone().insertAfter($template).find("input:text").val("");
});

参考：clear text field value in clone object

---

更新了Fiddle

var $template = $('.template');
$('input[name=addNewRow]').click(function() {
    $template.clone().insertAfter($template).find("input:text").val("");
});
$('input[name=removeRow]').click(function() {
    $('.template').filter(":not(:first-child)").get(-1).outerHTML = "";
});