403 error when using my WordPress plugin to delete comments

I recently created a plugin for WordPress that allows you to delete comments from a front-end post, with an undo delete function and without having to reload the page each time (Ajax). However, when I click on the delete button, nothing happens and I get a "POST /wp-admin/admin-ajax.php 403" error in the Google console.

Here is the PHP code of the plugin:

<?php
/*
Plugin Name: Comment Deleter
Plugin URI: https://example.com/
Description: A plugin for deleting comments with undo function and 
using AJAX.
Version: 1.0.0
Author: Alexis Grolot
Author URI: https://example.com/
License: GPL2
*/

function comment_deleter_enqueue_scripts() {
    wp_enqueue_script( 'comment-deleter', plugin_dir_url( __FILE__ ) . 
    'comment-deleter.js', array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'comment-deleter', 'comment_deleter_ajax', array( 
    'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
}
add_action( 'wp_enqueue_scripts', 'comment_deleter_enqueue_scripts' 
);

function comment_deleter_delete_comment() {
    check_ajax_referer( 'comment_deleter_delete_comment' );
    $commentId = isset( $_POST['comment_id'] ) ? intval( 
    $_POST['comment_id'] ) : 0;
    $comment = get_comment( $commentId );
    if ( $comment ) {
        wp_delete_comment( $commentId, true );
        wp_send_json_success();
    } else {
        wp_send_json_error( 'Comment not found' );
    }
}
add_action( 'wp_ajax_comment_deleter_delete_comment', 
'comment_deleter_delete_comment' );
add_action( 'wp_ajax_nopriv_comment_deleter_delete_comment', 
'comment_deleter_delete_comment' );

function comment_deleter_undo_comment() {
    check_ajax_referer( 'comment_deleter_undo_comment' );
    $commentId = isset( $_POST['comment_id'] ) ? intval( 
    $_POST['comment_id'] ) : 0;
    $comment = get_comment( $commentId );
    if ( $comment ) {
        wp_untrash_comment( $commentId );
        wp_send_json_success();
    } else {
        wp_send_json_error( 'Comment not found' );
    }
}
add_action( 'wp_ajax_comment_deleter_undo_comment', 
'comment_deleter_undo_comment' );
add_action( 'wp_ajax_nopriv_comment_deleter_undo_comment', ' 
comment_deleter_undo_comment' );

Here is the plugin's JavaScript code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

jQuery( document ).ready( function( $ ) {
    $( '.comment-delete' ).click( function( e ) {
        e.preventDefault();
        var commentId = $( this ).data( 'comment-id' );
        var nonce = $( this ).data( 'nonce' );
        var data = {
            action: 'comment_deleter_delete_comment',
            comment_id: commentId,
            nonce: nonce
        };
        $.post( comment_deleter_ajax.ajax_url, data, function( response ) {
            if ( response.success ) {
                $( '#comment-' + commentId ).fadeOut();
            }
        } );
    } );
} );

jQuery( document ).ready( function( $ ) {
    $( '.comment-undo' ).click( function( e ) {
        e.preventDefault();
        var commentId = $( this ).data( 'comment-id' );
        var nonce = $( this ).data( 'nonce' );
        var data = {
            action: 'comment_deleter_undo_comment',
            comment_id: commentId,
            nonce: nonce
        };
        $.post( comment_deleter_ajax.ajax_url, data, function( response ) {
            if ( response.success ) {
                $( '#comment-' + commentId ).fadeIn();
                $( '.comment-delete-undo' ).hide();
            }
        } );
    } );
} );

<!-- end snippet -->

And I add this code in the comments.php file of my theme:

<?php if ( current_user_can( 'manage_options' ) ) : ?>
    <a href="#" class="comment-delete" data-comment-id="<?php 
    comment_ID(); 
    ?>" data-nonce="<?php echo wp_create_nonce( 
    'comment_deleter_delete_comment' ); ?>">Delete</a>
<?php endif; ?>
<span class="comment-delete-undo" style="display: none;">
    <a href="#" class="comment-undo" data-comment-id="<?php 
    comment_ID(); ?>" data-nonce="<?php echo wp_create_nonce( 
    'comment_deleter_undo_comment' ); ?>">Undo</a>
</span>

I suspect this is due to permissions or security issues, but I'm not sure of the exact source of the problem. I have already verified that the nonce was valid and that the logged in user had the proper permissions to delete comments. I also tried disabling other plugins to see if there were any conflicts.

Can you help me solve this problem and give me advice on what I can do to allow my plugin to work properly?

You're sending your nonce but you're not verifying it correctly. check_ajax_referer() needs more parameters.

First one is your nonce name so comment_deleter_delete_comment. Second one is the $_REQUEST name, in your case that is nonce.

Resulting in the following: check_ajax_referer('comment_deleter_delete_comment', 'nonce').

If you don't want to add a second parameter you need to rename them in JS to one of the default values (_ajax_nonce or _wpnonce).

var data = {
  action: 'comment_deleter_delete_comment',
  comment_id: commentId,
  _ajax_nonce: nonce
};