使用jQuery删除动态添加表格行失败，求技术支持

Hey there! Let's dig into why your dynamic table row removal isn't working as expected. Looking at your code, here are several key checks and fixes you can try:

1. Verify AJAX Request Success #

The most common culprit here is that your AJAX request might be failing, so the success callback (where you remove the row) never runs. Add an error handler to debug this:

$(document).on('click', '.removeFile', function() {
    var $tr = $(this).closest('tr');
    var file = $(this).data('file');
    
    bootbox.confirm('Weet je zeker dat je het bestand wilt verwijderen?', function(result) {
        if (result) {
            $.ajax({
                url: '{{ route('media.remove') }}',
                method: 'GET',
                data: { file: file },
                success: function(data) {
                    $tr.remove();
                },
                // Add this error handler to catch issues
                error: function(xhr, status, error) {
                    console.error('AJAX Error Details:', error);
                    console.log('Response:', xhr.responseText);
                    alert('Het verwijderen van het bestand is mislukt. Controleer de console voor meer details.');
                }
            });
        }
    });
});

Open your browser's DevTools (F12) and check the Network tab to see if the request returns a 200 OK status. If it's a 404/500 error, your route or backend logic might be broken.

2. Secure Variable Scope for the Table Row #

While your original code uses elem.closest('tr'), storing the row in a variable early (before the bootbox callback) eliminates any potential scope issues. This ensures you're targeting the correct row even if context changes:

// Store the row immediately when the button is clicked
var $tr = $(this).closest('tr');
// Then use $tr.remove() in the success callback

3. Confirm Event Delegation is Targeting the Right Elements #

Double-check that:

• Your dynamically added table rows include buttons with the exact class .removeFile (no typos!).
• The buttons have the data-file attribute populated correctly. You can verify this by right-clicking the button in DevTools → Inspect and checking the Attributes panel.

4. Check Bootbox Callback Compatibility #

If you're using a newer version of Bootbox, the callback-based confirm might be deprecated in favor of Promises. Try this async/await approach for better reliability:

$(document).on('click', '.removeFile', async function() {
    var $tr = $(this).closest('tr');
    var file = $(this).data('file');
    
    // Use Promise-based confirm
    const confirmed = await bootbox.confirm('Weet je zeker dat je het bestand wilt verwijderen?');
    
    if (confirmed) {
        try {
            await $.ajax({
                url: '{{ route('media.remove') }}',
                method: 'GET',
                data: { file: file }
            });
            $tr.remove();
        } catch (err) {
            console.error('Error:', err);
            alert('Verwijderen mislukt!');
        }
    }
});

5. Validate Backend Route and Logic #

Make sure the {{ route('media.remove') }} Blade directive generates a valid URL. You can test this by hardcoding the URL temporarily (e.g., url: '/media/remove') to rule out Blade rendering issues. Also, confirm your backend endpoint correctly processes the file parameter and returns a successful response.

Start with checking the AJAX error logs first—this will usually point you directly to the problem!

内容的提问来源于stack exchange，提问作者jol123