Question

我有一个名为interest_type_container的容器。其中2个字段是兴趣类型和期间。

HTML：

<div id="interest_type_container">
    <label class="col-md-4">Interest Type *</label>
    <select name="interest_type[]" class="form-control">
        <option value="">Select</option>
        // Some options...
    </select>

    <label class="col-md-4">Interest Period *</label>
    <select name="interest_period[]" class="form-control">
        <option value="">Select</option>
        // Some options...
    </select>
</div>
<button type="button" name="add_more_interest" id="add_more_interest">Add</button>
<button type="button" name="remove_more_interest" id="remove_more_interest">Remove</button>

JQUERY： 我这是add和remove函数。因此，当用户点击添加时，它会从ajax请求中添加这两个字段。

AJAX：

$("#add_more_interest").on('click',function(){
$.ajax({
    type: 'post',
    url: '/transaction/fetch_interest_type_and_period',
    success: function (res) {
        $('#interest_type_container').append(res);
    }
});
});

当用户点击删除时。它应该删除最后插入的2个字段。我试过这个。但是，它没有用。

$("#remove_more_interest").on('click', function(){
    $('#interest_type_container:last-child', this).remove();
});

Answer 1

以下是您可以使用HTML（一对标签和没有周围元素的选择）所做的事情的示例：

$("#remove_more_interest").on('click', function () {
    var labelLength = $('#interest_type_container > label').length - 1;
    var selectLength = $('#interest_type_container > select').length - 1;
    $('#interest_type_container > label').eq(labelLength).remove();
    $('#interest_type_container > label').eq(labelLength - 1).remove();
    $('#interest_type_container > select').eq(selectLength).remove();
    $('#interest_type_container > select').eq(selectLength -1).remove();
});

虽然这是使用直接蛮力，但可能有更好，更优雅的方法来实现这一目标。 http://jsfiddle.net/jayblanchard/uohc23xd/

Answer 2

您必须指定标签类型并使用＆＃34; last＆＃34;选择器

$(document).on('click', '#remove_more_interest', function(){
    $('#interest_type_container').children('label:last').remove();
    $('#interest_type_container').children('select:last').remove();
});

您可以通过点击F12并选择控制台选项卡，从Web浏览器控制台测试您的选择器。写下这些行，你就会看到它返回的内容。这个控制台是你最好的朋友！

你的onclick方法不好！完整的代码HERE

<html><head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).on('click', '#remove_more_interest', function(){
    $('#interest_type_container').children('label:last').remove();
    $('#interest_type_container').children('select:last').remove();
    $('#interest_type_container').children('label:last').remove();
    $('#interest_type_container').children('select:last').remove();
});
</script>
</head><body>
<div id="interest_type_container">
    <label class="col-md-4">Interest Type *</label>
    <select name="interest_type[]" class="form-control">
        <option value="">Select</option>
    </select>

    <label class="col-md-4">Interest Period *</label>
    <select name="interest_period[]" class="form-control">
        <option value="">Select</option>
    </select>
</div>
<button type="button" name="remove_more_interest" id="remove_more_interest">Remove</button>
</body></html>

Answer 3

你可以做一件事。附加结果后，将其放入容器中，例如

    $('#interest_type_container').append('<span class="appended_res">'+res+'</span>');

之后，您可以使用class＆＃39; attached_res＆＃39;删除元素。

Answer 4

谢谢你们的努力。我想出了一个解决方案。它有效。

动态生成的元素，来自ajax。我将这些元素放在new_inserted_elements ID。

下

现在， JQUERY：

$("#remove_more_interest").on('click', function(){
    $('#new_inserted_elements').remove();
});

删除最后插入的id，这些是我的2个元素。

在JQUERY中通过php删除最后插入的元素

4 个答案: