Question

如何删除上次动态添加的字段http://jsfiddle.net/6mzjfmwd/

$('#addContact').click(function() {
        $('.row').append(
            '<br><div class="col-md-6">contact type</div><div class="col-md-6">contact</div>'
            );
        return false;
    });

$('#removeContact').click(function() {
        $(this).closest(".row").remove();
        return false;
    });

Answer 1

这将删除行的最后一个div

$('#removeContact').click(function() {
    $(".row div").last().remove();
});

如果您要删除最后添加的联系人的所有数据：

$(".row").find("br:last").nextAll("div").remove();
$(".row").find("br:last").remove();

Answer 2

使用siblings()方法

$('#removeContact').click(function() {
    $(this).siblings(".row").remove();
    return false;
});

示例小提琴： DEMO

注意： closest()方法只会获取祖先元素。

siblings(".row")将返回所有兄弟div.row元素。从那里，您可以单独删除所选的div.row元素。

Answer 3

这将起作用

" ()[,]"

Answer 4

更改您的JS以在联系人周围包含一个包装div：

$('#removeContact').click(function() {
    $(".col-md-6").last().remove();
    $(".col-md-6").last().remove();
    $("br").last().remove();
    return false;
});

小提琴：http://jsfiddle.net/sandenay/6mzjfmwd/2/

更新小提琴：不使用$('#addContact').click(function() { $('.row').append( // Observe the change here '<div class="contact"><br><div class="col-md-6">contact type</div><div class="col-md-6">contact</div></div>' ); return false; }); $('#removeContact').click(function() { $(".row").find(".contact").last().remove(); return false; });标记。而是使用CSS。

http://jsfiddle.net/sandenay/6mzjfmwd/4/

删除动态添加的表单字段

4 个答案: