Quiero eliminar todo el elemento al hacer clic en el botón.
La eliminación debe hacerse a través de la tecnología Ajax, es decir, sin recargar la página. Después de eliminar un usuario, la entrada con él debería desaparecer de la lista de todos los usuarios.
Aquí está la estructura de mi código:
<?php require_once "lib/mysql.php"; //database connection $query = $pdo->prepare('SELECT * FROM `users`'); $query->execute(); $users = $query->fetchAll(PDO::FETCH_ASSOC); foreach($users as $user) { echo '<div class="infoAllUsers"><b>Name: </b>' . $user['name'] . ', <b>Login: </b>' . $user['login'] . '<button onclick="deleteUser('.$user['id'].');">Delete</button></div>'; }; //display all users ?> <script> function deleteUser(id) { $.ajax({ url: 'ajax/deleteUser.php', type: 'POST', cache: false, data: {'id': id}, success: function(data) { $(this).closest(".infoAllUsers").remove(); } }); } </script> No hay errores en js y php, no hay nada en la consola, la eliminación de la base de datos se produce correctamente.
Soy nuevo en jQuery, así que probé algunas cosas como:
$(this).parent('div').remove(); $(this).closest('div').remove(); $(this).parent('.infoAllUsers').remove();El codigo parece correcto, lo unico que se me ocurre es que tu backend de php no esta devolviendo un codigo Http que este en el rango 2XX y por eso no entra en la funcion exito de tu request ajax, has probado a hacer un console.log() dentro de la función que elimina el <div> para ver si el JS llega a ese punto? Documentación de la función Jquery.ajax()
Adopte un enfoque diferente/más limpio
Establezca la identificación como un atributo de datos y asigne una clase, luego agregue el evento de clic a eso.
<button class="delete" data-id="'.$user['id'].'">Delete</button>
$('.infoAllUsers .delete').click(function(elm) { $.ajax({ url: 'ajax/deleteUser.php', type: 'POST', cache: false, data: { 'id': $(elm).data('id') }, success: function() { $(elm).parent().remove(); } }); })<?php require_once "lib/mysql.php"; //database connection $query = $pdo->prepare('SELECT * FROM `users`'); $query->execute(); $users = $query->fetchAll(PDO::FETCH_ASSOC); foreach($users as $user) { echo '<div class="infoAllUsers"><b>Name: </b>' . $user['name'] . ', <b>Login: </b>' . $user['login'] . '<button onclick="deleteUser('.$user['id'].', this);">Delete</button></div>'; }; //display all users ?> <script> function deleteUser(id, this2) { var $t = $(this2); $.ajax({ url: 'ajax/deleteUser.php', type: 'POST', cache: false, data: {'id': id}, success: function(data) { $t.closest('.infoAllUsers').remove(); } }); } </script>