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

EDIT** 我在克隆和清除​​文本框时遇到的第一个问题已经解决。

如果您参考上面的 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 = "";
});