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:
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.
Esta entrada ha sido editada el 14/18/2019.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
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!
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;
}
}
});
Buenas, estoy probando el codigo pero en lugar de usar divs usando tablas, cambiando esto:
<div id="service» data=»»>
por esto:
<tr id="service» data=»»>
Tan solo cambia el div por un tr, pero no consigo hacerlo funcionar, de hecho cuando le doy al no hace ninguna accion (he añadido un alert para comprobarlo) y nada, que no hay narices de hacer que funcione, ¿aluna solucion?
Consulta aparte..
Estoy intentando modificar un campo de la bd con ajax, de hecho es en la misma tabla, intentando hacer que con un link () o con un input o algo me cambie el estado de activo a inactivo (un booleano 0-1) pero tan olo encuentro tu tutorial de modificar en el sitio con ajax ¿por algun casual tendrias por ahi algun tuto de como modificar (actualizar registros) de la bbdd con ajax, jquery, php usando botones, se que puede parecer algo tonta la pregunta, pero ando volviendome loco buscando por google y no encuentro nada (descontando tutos del 2006-2007).
Gracias por adelantado, y disclpas por postear en un tema tan viejo, pero soy novato en ajax, hasta ahora me habia bastado con php mysql
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’
Enséñanos el código completo para hecharte una mano
Gracias por responder, pero ese problema he conseguido solucionarlo ya.
Gracias me sirvió
por casualidad no hay videos de como obtener datos de una BD con ajax ?????
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()
{
}
});
});
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!!
Ya lo solucioné José, fue tan facil como el
id="service" data=""el las etiquetas
Saludos
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
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
------------------------------------
<<>>
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?
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
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
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
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
se ve que cuando lo probe tenia un problema con el navegador, esta andando de 10 online
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
Para hacerlo con la base de datos tendrás que listar los objetos como sueles hacer y añadir el botón de eliminar para cada registro.
El archivo delete.php que es llamado en el ajax tan solo tendrá lo siguiente:
Antes de estas 2 lineas de código tendrás que conectar con tu base de datos como te inidico aqui:
http://www.jose-aguilar.com/blog/conectar-php-con-mysql/
Saludos
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
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
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..
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.
Oléeée, Oléée!
gracias amigo me vino fenomenal
Tendrias algun inconbeniente en empaquetar los archivos y subirlos a internet para poder descargarlos sin problemas ? Muchas gracias 🙂
Hola buenos dias,
Pues descargar el script:
http://www.jose-aguilar.com/scripts/jquery/remove-content/remove-content.rar
Tendrás que editar el archivo config.php con los datos de acceso a la base de datos e importar el archivo .sql que incorpora el paquete.
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.
te comento que he probado el código pero no me ha funcionado, intente de varias formas, pero no ha funcionado
Muy bueno gracias, todo los que posteas es muy bueno
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.