He creado una tabla HTML. Agrega dinámicamente filas a la tabla y tiene la opción de eliminar la fila actual. Cada fila es datos de MongoDB. Al hacer clic en el botón 'eliminar', quiero que un elemento se elimine de la base de datos. Sin embargo, no puedo crear una etiqueta HTML que pasará un vínculo a la función sin volver a cargar la página. Mi método actual recarga la página después de presionar el eliminar! ¿Cómo debería hacer eso?

Aquí está mi código: -

$(document).submit( '#newProductForm', function(e) {
    e.preventDefault();

    //Create data for submission to database
    let data = $('#newProductForm').serialize();
    console.log("Form submitted: " + data);

    $.post({
        url: '/admin/add',
        type: 'POST',
        data: data,
        dataType: 'json'
    }).done( response => {
        resetProductTable();
        console.log("Successfully added products to the database!")
    }).fail( function (response) {
        console.log('Error New Product: ' + response);
    })
})

//Gets all the products from the database
function getAllProducts(){
    $.ajax('/admin/all').done( function (data) {

        const productTable = $('#productsTable');
        if (productTable.css("visibility", "hidden")) {
            productTable.css("visibility", "visible");
        }
        productTable.css("visibility", "visible");
        $('#loadingMessage').remove();
        if (data) {
            data.forEach(element => {
                productTable.append(`<tr class="productRows"><td>${element.title}</td>
                                         <td>${element.description}</td>
                                         <td>${element.price}</td>
                                         <td>${element.shipping.timeNeeded}</td>
                                         <td>${formatTime(element.shipping.price)}</td>
                                         <td>${element.quantity}</td>
                                         <td>${element.DateAdded}</td>
                                         <td>${element.tags}</td>
                                         <td><a href="admin/edit/${element._id}">Edit</a></td>
                                         <td><a href="admin/delete/${element._id}" id="deleteLink">Delete</a></td>
                                    </tr>`);
            });
        } else {
            productTable.append(`No Products Found!`)
        }
        console.log("Leaving get all products!");
    })
}
1
killerprince182 3 nov. 2019 a las 22:16