当前位置：首页 > jquery

jquery批量删除

2026-02-03 22:34:49jquery

jQuery 批量删除的实现方法

使用 jQuery 批量删除通常涉及选择多个元素并移除它们，或在 AJAX 请求中批量删除后端数据。以下是几种常见场景的实现方式：

前端 DOM 元素批量删除

// 通过类名批量删除元素
$('.item-to-delete').remove();

// 通过属性选择器批量删除
$('[data-delete="true"]').remove();

结合复选框的批量删除

<input type="checkbox" class="delete-checkbox" data-id="1">
<input type="checkbox" class="delete-checkbox" data-id="2">
<button id="batch-delete">批量删除</button>

$('#batch-delete').click(function() {
    $('.delete-checkbox:checked').each(function() {
        var id = $(this).data('id');
        $(this).closest('tr').remove(); // 删除对应的行
        // 或者发送AJAX请求到后端
    });
});

AJAX 批量删除后端数据

var ids = [];
$('.delete-checkbox:checked').each(function() {
    ids.push($(this).data('id'));
});

$.ajax({
    url: '/api/delete-items',
    type: 'POST',
    data: { ids: ids },
    success: function(response) {
        $('.delete-checkbox:checked').closest('tr').remove();
    }
});

表格行批量删除示例

jquery批量删除

// 删除所有选中的表格行
$('table').on('click', '.delete-btn', function() {
    $(this).closest('tr').remove();
});

// 批量删除多行
$('#delete-selected').click(function() {
    $('table input[type="checkbox"]:checked').closest('tr').remove();
});

注意事项

批量删除前最好添加确认对话框，防止误操作
对于重要数据删除，建议先通过AJAX请求后端验证
大量DOM操作可能影响性能，可考虑使用文档片段(documentFragment)优化

性能优化建议

// 使用detach()代替remove()可保留数据和事件
var $elements = $('.to-delete').detach();

// 大量元素删除时先隐藏容器
$('#container').hide();
$('.to-delete').remove();
$('#container').show();