How to remove a data from datatables pushed an array (maybe with pop) (javascript)

Question

I am trying to eliminate data through an array that I made myself in which data is added while I give them add through a table

As you can see, that add button generates an array in which I use push to enter each data one by one each time I click the add button

I have another function that is for the delete button, where I delete the row from the table, but obviously it does not do it in the array

I have two things in mind at the moment:

One option is to create another array of deleted data and while I'm going to save at the same time, those that are marked in the array of deleted data are deleted

Another option that I think is the best is to work through the same JavaScript with the delete button to remove the data from the only array that I have, I want that button to simply delete the data from the selected array, but I think that makes it difficult for me to little more and what I need help for

this is my code that adds so far

$('#btn-add').on('click', function () {
               let name = $('#name').val();
                let email = $('#email').val();
                let duplicated = checkDuplicate(email);
                if ($('#digest-report-form').valid() && !duplicated) {
                    addRow(itemCounter, name, email);
                    itemCounter++;
                    $('#name').val("");
                    $("#email").val("");

                   let recipientData = {
                        name: name,
                        email: email,
                    };
                    recipientsArray.push(recipientData);

                  $('#recipients').val(JSON.stringify(recipientsArray));
                    console.log($('#recipients').val());
               } else if (duplicated) {
                   $('#alert').show();
                    setTimeout(function () {
                        $('#alert').hide();
                    }, 3000);
                }

            });

and this is the code of the function of the delete button that at the moment does not do anything to the array

$('#mail-recipient-table tbody').on('click', '.deleted', function () {
                        dataTable
                            .row($(this).parents('tr'))
                            .remove()
                            .draw();
                    });

I was thinking of using pop, but for that I have to sort the array to place the last array as the selected one, and here the idea is a bit difficult for me, thanks for reading:)

Answer 1

 let array = []; //you can try with a email that doens't exist into the array let email = 'prueba1@gmail.com' // let recipientData = { name: 'prueba1', email: 'prueba1@gmail.com', }; array.push(recipientData) recipientData = { name: 'prueba2', email: 'prueba2@gmail.com', }; array.push(recipientData) //im creating two new elemnts into the array console.log(array) //here we going to find the key of the element comparing the email const index = array.findIndex(el => el.email === email); if (index === -1) { //if don't existe you can create a new one console.log('dont exist') }else{ // and if exist we removed, array.splice(), index, and we specific than removed exactly one const removed = array.splice(index, 1) //and return the element removed console.log(removed) } // and console.log array to verify console.log(array)

Hi, I leave you an example and the specifications of the code I leave it with comments in the code.

Answer 2

Ok, It's done

            $('#mail-recipient-table tbody').on('click', '.deleted', function () {
                let value = $(this).closest('tr').find('td').eq(1).text();
                for(let i = 0; i < recipientsArray.length; i++) {
                    if(recipientsArray[i].name == value) {
                        recipientsArray.splice(i, 1);
                        break;
                    }
                }
                console.log(recipientsArray);
                dataTable
                    .row($(this).parents('tr'))
                    .remove()
                    .draw();
            });

Answer 3

 $(document).ready(function () {
    $('#example tbody tr').click(function () {
        var index = $(this).closest("tr")[0];
        oTable.fnDeleteRow(oTable.fnGetPosition(index));
    });        
    var oTable = $('#example').dataTable();

});