Question

我有一个表单，允许用户使用以下代码添加新行：

 var insertRow = function() {

$(".box")
    .append($("<div class='row' style='padding-bottom:10px;'>"))
    .append($("<div class='col-lg-3'><input type='text' class='form-control' name='name[]' placeholder='Item Name'></input></div>"))
    .append($("<div class='col-lg-4'><textarea class='form-control' name='description[]' placeholder='Description' rows='1'></textarea></div>"))
    .append($("<div class='col-lg-2'><div class='input-group'><span class='input-group-addon' id='basic-addon1'>$</span><input type='text' class='form-control' name='price[]' onKeyUp='calculate()' placeholder='Unit Price'></input></div></div>"))
    .append($("<div class='col-lg-1'><input type='text' class='form-control' name='quantity[]' onKeyUp = 'calculate()' placeholder='Qty'></input></div>"))
    .append($("<div class='col-lg-2'><div class='input-group'><span      class='input-group-addon' id='basic-addon1'>$</span><input type='text' placeholder='Line total' class='form-control' name='total[]' readonly></input></div></div>"))
    .append($("</div><a href='#' class='remove_row'>remove</a>")); 

}

我正在尝试使用此代码删除，但它无法正常工作：

 // Remove parent of 'remove' link when link is clicked.
 $('.box').on('click', '.remove_row', function(e) {
e.preventDefault();

$(this).parent().remove();
 });

这样做是删除所有行，而不仅仅是最后一行。

Answer 1

所有添加的标签都不属于“行”，它只是一堆一个接一个插入的标签。删除代码将删除此示例中的所有“行”。

尝试这样的事情：

var insertRow = function() {

var row = $("<div>")
    .append($("<div class='row' style='padding-bottom:10px;'>"))
    .append($("<div class='col-lg-3'><input type='text' class='form-control' name='name[]' placeholder='Item Name'></input></div>"))
    .append($("<div class='col-lg-4'><textarea class='form-control' name='description[]' placeholder='Description' rows='1'></textarea></div>"))
    .append($("<div class='col-lg-2'><div class='input-group'><span class='input-group-addon' id='basic-addon1'>$</span><input type='text'     class='form-control' name='price[]' onKeyUp='calculate()' placeholder='Unit Price'></input></div></div>"))
    .append($("<div class='col-lg-1'><input type='text' class='form-control' name='quantity[]' onKeyUp = 'calculate()' placeholder='Qty'></input></div>"))
    .append($("<div class='col-lg-2'><div class='input-group'><span      class='input-group-addon' id='basic-addon1'>$</span><input type='text' placeholder='Line total' class='form-control' name='total[]' readonly></input></div></div>"))
    .append($("</div><a href='#' class='remove_row'>remove</a>")); 
    $(".box").append(row);
}

Answer 2

这是因为this实际上是你要删除的div的兄弟a.remove_row，你需要使用兄弟姐妹（＆＃34; div.row＆＃34;）或prev （）删除。

jQuery删除上次添加的行

2 个答案: