Como eliminar registros con jQuery, Ajax y PHP

En este artículo vas a descubrir como eliminar registros con jQuery, Ajax y PHP enviando los datos al servidor sin recargar la página, ofreciendo de esta forma una mejor experiencia de usuario en tus aplicaciones o páginas webs.

En una página o aplicación web dinámica que requiere de la interacción del usuario siempre puede ser interesante poder eliminar datos o registros que ya no se utilizan o ya no tienen importancia para liberar espacio en la interfaz y en la base de datos.

Sitúate en el caso de estar en una página web en la que los usuarios pueden agregar productos en un carrito de compras.

Paralelamente, puedes ofrecerle la posibilidad de eliminar estos productos para permitir al usuario corregir o actualizar su carrito.

Una forma bastante dinámica y atractiva de hacerlo es utilizando una combinación de las tecnologías jQuery, Ajax y PHP.

El jQuery es ideal para aplicar efectos.

Ajax y PHP para actualizar los registros en la base de datos sin necesidad de recargar la página.

En el ejemplo en funcionamiento estoy visualizando unos registros que se recogen de una base de datos y el usuario tiene la posibilidad de eliminarlos.

El ejemplo solo muestra el efecto de eliminación pero no hace nada en la base de datos.

De todas formas, en este tutorial puedes ver el código para conseguirlo.

Código HTML en tu archivo principal

Voy a empezar por el archivo principal o index.html, en el caso del ejemplo donde vamos a tener los elementos incrustados en el HTML.

El ejemplo en funcionamiento no tiene una maquetación o diseño especial. Está basado en la tecnología Bootstrap 4.

Dentro del cuerpo de la página o dentro de la etiqueta <body> agrega el listado de elementos.

Lo ideal es que se recojan de una base de datos.

En el ejemplo en funcionamiento tan solo vamos a mostrar el código HTML que no es más que algo como lo que sigue:

<div class="row">
    <div id="item-1" class="col-lg-12">
        <div class="item">
            <h3>What is Lorem Ipsum?</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            <a class="btn btn-secondary delete" href="#" data="1"><i class="fa fa-remove"></i> Eliminar</a>
        </div>
    </div>
    <div id="item-2" class="col-lg-12">
        <div class="item">
            <h3>Why do we use it?</h3>
            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            <a class="btn btn-secondary delete" href="#" data="2"><i class="fa fa-remove"></i> Eliminar</a>
        </div>
    </div>
    <div id="item-3" class="col-lg-12">
        <div class="item">
            <h3>Where does it come from?</h3>
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p>
            <a class="btn btn-secondary delete" href="#" data="3"><i class="fa fa-remove"></i> Eliminar</a>
        </div>
    </div>
    <div id="item-4" class="col-lg-12">
        <div class="item">
            <h3>Where can I get some?</h3>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
            <a class="btn btn-secondary delete" href="#" data="4"><i class="fa fa-remove"></i> Eliminar</a>
        </div>
    </div>
</div>

Tenemos 4 elementos con un botón para eliminar cada uno de ellos.

Es importante que te fijes bien en los botones para eliminar. Tiene un class=»delete» que usaré para controlar el evento «click» de los mismos y un atributo «data» que contiene el identificador del elemento.

Justo por encima de los elementos no te puedes olvidar agregar el contenedor que mostrará la alerta o mensaje de confirmación de eliminación correcta, inicialmente oculto:

<div class="alert alert-success" style="display:none;"></div>

Control del evento «click» que permite la eliminación

La clave de eliminar registros con jQuery se puede agregar en la cabecera o justo antes de la etiqueta de cierre </body>.

En la cabecera de la página o dentro de la etiqueta <head> puedes agregar la carga de la librería jQuery y la función que controla el evento de los botones «Eliminar»:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.delete').on('click', function(e) {
        e.preventDefault();
        var parent = $(this).parent().parent().attr('id');
        var item = $(this).attr('data');
 
        var dataString = 'item='+item;
 
        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function(response) {			
                $('.alert-success').empty();
                $('.alert-success').append(response).fadeIn("slow");
                $('#'+parent).fadeOut("slow");
            }
        });
    });                 
});    
</script>

El código anterior lo que hace es esperar a que alguno de los botones con class=»delete» sea pulsado para eliminar el elemento.

Mediante la llamada Ajax ejecuto el archivo process.php recibiendo mediante el método POST los parámetros que le estoy enviando en el «data».

El success de la llamada Ajax se encarga de vaciar el contenedor de la confirmación para agregar el mensaje que vienen del servidor.

Seguidamente, el elemento se oculta mediante fadeOut(). En este punto, quizás puede ser mejor utilizar la función remove() para eliminar del DOM el elemento y no dejarlo oculto.

Ejecución en el servidor

El archivo process.php puede contener algo como lo siguiente:

<?php
$connexion = new mysqli('localhost', 'USUARIO', 'PASSWORD', 'BASE DE DATOS');
 
$item = (int)$_POST['item'];
 
$connexion->query('DELETE FROM items WHERE id_item = '.$item);
 
echo 'Se ha eliminado correctamente el elemento con id='.$item.'.';
?>

Tan solo son 4 líneas de código donde estoy:

  • Realizando una conexión con la base de datos utilizando mysqli.
  • Recogiendo el valor del elemento que se desea eliminar.
  • Realizando la consulta que ejecuta la eliminación del elemento de la tabla de elementos situada en la base de datos.
  • Imprimiendo el mensaje que deseo mostrar como confirmación.

Conclusión

Como puedes ver, eliminar registros con jQuery, Ajax y PHP es muy sencillo.

Bien es cierto que existen muchas otras posibilidades para conseguir esto mismo. En próximos tutoriales, estaré redactando como eliminar registros con otros tecnologías.

Por ahora, espero que este tutorial sea útil para ti y puedas conseguir tu propósito.

Ver demo Descargar

Esta entrada ha sido editada el 14/18/2019.

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(26 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

32 respuestas a “Como eliminar registros con jQuery, Ajax y PHP”

  1. Franklin dice:

    Me ha servido de mucho el código.

    Solo una actualización; en la nuevas versiones de jQuery se debe usar la sentencia
    $(document).on(‘click’, ‘.delete’, function(e){}

    Para que funcione.!!!

    Saludos!

  2. dixon zamora dice:

    Saludos quisiera me ayudaras a arreglar mi ajax quiero pasar un valor a un archivo php pero no lo he logrado dejo parte del codigo
    var datos = usuario; // Esta es la variable que quiero pasar por post
    $.ajax({
    type: ‘POST’,
    url: ‘deluser.php’,
    error: function(data){
    $(«.result_fail»).fadeIn();
    $(«.result_fail»).html(«Se produjo un error»);
    },
    data: datos,
    success: function(data) {
    if(data==1){
    $(«#Usuarios»).load(«cargarUsuarios.php», function(){});
    $(«.result_fail»).fadeIn(15000);
    $(«.result_fail»).html(«Error UNO Eliminando Registro»);
    }
    else{
    $(«.result_fail»).fadeIn(15000);
    $(«.result_fail»).html(«Error DOS Eliminando Registro»);
    return false;
    }
    }
    });

    • Argaith dice:

      perdon por e doble post, ha eliminado parte de codigo de lo que habia añadido ademas de meter enlaces cuando no tocaba (la costumbre de meter los ‘a’ de los links) los data lo que llevarian dentro seria el ‘id’

    • Jose Aguilar dice:

      Enséñanos el código completo para hecharte una mano

  3. fernando dice:

    Gracias me sirvió

  4. Ace dice:

    por casualidad no hay videos de como obtener datos de una BD con ajax ?????

  5. sergio orjuela dice:

    hola buenas noches actualmente estoy trabajando codigo parecido a este pero estoy intentando hacer que se halla eliminado correctamente o si no se halla eliminado mostrar el error
    $.ajax({
    type: «POST»,
    url: «eliminar.php»,
    data: dataString+’&id=’+valor,
    success:function(data){
    if(data.estado==»ok»)
    {
    alert(data.mensaje);
    }
    else
    {
    alert(data.mensaje);
    }
    },
    beforeSend:function()
    {
    },
    complete:function()
    {

    }
    });
    });

  6. Luciano dice:

    Hola José: Estoy tratando de implementar tu código en un proyecto y no me funciona si lo utilizo dentro de una tabla. Solo con divs me funciona genial pero al intentar eliminar una fila de una tabla (1Nombre) no me funciona. Algún consejo? Gracias!!

    • Luciano dice:

      Ya lo solucioné José, fue tan facil como el
      id="service" data=""
      el las etiquetas
      Saludos

      • Francisco dice:

        como lo hiciste ? necesito eliminar un registro de una tabla que esta en un array pero no me ejecuta hasta darle f5 necesito ocultar la fila o removerla no me sale

  7. Alberto dice:

    Hola buenas, tengo un problema tonto, resulta que donde quiero poner el boton de eliminar no me realiza la accion, sin embargo si lo situo antes del cierrre /div del contenedor general si me lo cierra. ¿Cuál puede ser el motivo? Me urge solución ya que no la encuentro.

    .....

    <a href="leer.php?historia=" class="btn btn-default">Abrir
    <a href="compartir.php?historia=" class="btn btn-info">Compartir

    ME INTERESA PONERLO AQUÍ, PERO NO FUNCIONA
    ---------------------------------
    <button class="delete btn btn-danger" id="delete" >Eliminar
    ------------------------------------

    <<>>

    • Jose Aguilar dice:

      El código lo veo extraño. Veo que pones un enlace dentro de otro. No creo que sea muy óptimo y dudo que funcione. Falta el cierre del enlace . Lo podríamos ver en linea el problema?

  8. Joz dice:

    Gracias por el aporte, lo modifique un poco e hice algo así:

    $(".delete").click(function(e){
    var delete = $(this).attr('id');
    $.ajax({
    type: "POST",
    url: 'functions/delete-resource.php',
    data:{ id: delete },
    beforeSend: function(){
    $('#loading').fadeIn(800);
    },
    success: function() {
    $('#loading').fadeOut(800);
    location.reload();
    },
    });
    e.preventDefault();
    });

    de tal forma me permitio eliminar los datos de una tabla el reload me sirve para refrescar los datos ya que no los muestro con jquery, pero con una pequeña modificación después lo haré

    saludos

  9. krow dice:

    muy buen dato, pero no he podido encontrar una respuesta a mi problema…
    es algo similar la unica diferencia es que mi tabla no tiene un id… ya que mi llave primaria es el conjunto de varios campos, ahi surge mi duda… como puedo apoyarme de una checkbox cuando al momento de meter la consulta para eliminar necesito 5 campos…
    para dar un ejemplo…

    agrego grado, grupo, actividad, dia, hora de inicio y hora de fin… el conjunto de esos campos es mi llave primaria por que no se pueden repetir…. como recuperar ese dato si son varias actividades

  10. andres dice:

    de nuevo yo, tu ejemplo que esta en el rar pasa lo mismo, en mi localhost va bien, lo subo a la web para testearlo y nada

  11. andres dice:

    hola, antes qe nada muchas gracias, te cuento q lo he modificado y me anda de 10 en mi localhost, pero cuando lo subo no me funciona, tengo que presionar F5 para que borre la foto

    saludos

  12. josep dice:

    buenas noches jose aguilar muy buen blog gracias por compartir queria preguntarte al igual que el amigo carlos s. como hacerlo con una base de datos la verdad yevo horas tratando de hacerlo podrias mandar algun de ejemplo tuyo o una pagina que trate asi gracias de antemano

  13. Carlos s dice:

    si se supone que el id del objeto a eliminar esta dentro de a:

    y se envia directamente a al archivo delete.php

    no tendria que funcionar directamente?

    si no es molestía, podrías poner algun ejemplo de como eliminarlo , yo con sólo php es fácil pero con ajax no me aclaro, gracias

  14. Carlos s dice:

    si se supone que el id del objeto a eliminar esta dentro de a:

    Eliminar

    y se envia directamente a al archivo delete.php

    no tendria que funcionar directamente?

    si no es molestía, podrías poner algun ejemplo de como eliminarlo , yo con sólo php es fácil pero con ajax no me aclaro, gracias

  15. Carlos s dice:

    Hola he seguido todos tus pasos, pero me sigue sin borrar de la base de datos.¿Como puedo saber si estoy conectado bien?

    y otra cosa, a que te refieres con :

    Otra cosa importante es que deberás dinamizar el contenido del archivo “index.php” obteniendo la información de la base de datos. En el ejemplo que ilustramos simplemente aplicamos el efecto de eliminación jQuery.

    un saludo y gracias..

    • Jose Aguilar dice:

      Hola,

      Con esa cita quiero decir que en el ejemplo que tengo en funcionamiento sobre eso no ejecuto los scripts que eliminan de la base de datos y que será necesario realizar una consulta a la base de datos para mostrar los registros que se pretenden borrar.

  16. Eusebio dice:

    Oléeée, Oléée!

  17. Francisco dice:

    gracias amigo me vino fenomenal

  18. Visio dice:

    Tendrias algun inconbeniente en empaquetar los archivos y subirlos a internet para poder descargarlos sin problemas ? Muchas gracias 🙂

  19. Karen dice:

    te comento que he probado el código pero no me ha funcionado, intente de varias formas, pero no ha funcionado

  20. Jonatan dice:

    Muy bueno gracias, todo los que posteas es muy bueno

  21. Luis dice:

    Gracias por el ejemplo. Sería interesante modificarlo para actualizar algunos datos de un registro de la base de datos en este caso sustituyendo la sentencia delete por update.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ver más sobre