javascript - 添加和删​​除特定元素

Question

我正在尝试删除附加到 html 的特定 a href 标签:

jQuery:

第一个函数生成链接:

var edit_link = function (id, price) {
    var args = ('<a target="_blank" class="tag-res" href="/reservations/database/edit/'+id+'">Res: '+id+ '('+price+')</a>');
    return args;
}

第二次在选择值时附加链接。

var ajaxHandler = function(decrement) {
    return function(value){
        $.ajax({
            type: 'GET',
            url: '/police/get_res_price?price=' + value,
            success: function (data) {
                var initial_price = parseInt($('.give-me-money').val());
                var obj = JSON.parse(data);
                $.each(obj, function (booking_price, value) {
                    if (decrement) {
                        initial_price -= parseInt(value.BOOKING_PRICE);
                        $(edit_link(value.DBASE_ID, value.BOOKING_PRICE)).remove();
                    } else {
                        //case booking is null alert
                        if (value.BOOKING_PRICE === 0 || value.BOOKING_PRICE <= 0) {
                            alert('There is a problem with Reservation: ' + value.DBASE_ID + '\n\nProblem: Price is 0');
                        }
                        initial_price += parseInt(value.BOOKING_PRICE);
                        $('div[name=res_list]').removeClass('hidden');
                        $('.res_selected_list').append(edit_link(value.DBASE_ID, value.BOOKING_PRICE));
                    }
                });
                $('.give-me-money').val(initial_price); //set total
            }
        });
        this.qs1.cache();
        this.qs2.cache();
    }
}

HTML:

<div name="res_list" class="row-space-2 form-group hidden">
    <label class="col-md-3 control-label" for="inputTooltip">Selected reservations:</label>
    <div class="col-md-6 res_selected_list"></div>
</div>

附加工作正常，但尝试使用以下方法删除每个附加元素:$(edit_link(value.DBASE_ID, value.BOOKING_PRICE)).remove(); 什么也没发生。有建议吗？

Answer 1

当你这样做时

$(edit_link(value.DBASE_ID, value.BOOKING_PRICE)).remove(); 

它实际上创建了一个新项目并将其删除。

您需要能够找到创建的项目并将其从 DOM 中删除。
为此，您可以引入 data-id 属性:

var edit_link = function (id, price) {
    var args = '<a target="_blank" data-id="' + id + '" class="tag-res" href="/reservations/database/edit/'+id+'">Res: '+id+ '('+price+')</a>';
    return args;
}

然后，使用以下方法将其删除:

$('.tag-res[data-id="' + value.DBASE_ID + '"]').remove();