1

Tengo un contenedor con algunas filas y dentro de ellas un div que contiene botones, uno de estos botones es para eliminar item. Todos los botones tienen las mismas clases y Ids. lo que quiero hacer es que al presionar el botón a través de javascript se elimine el contenedor abuelo y su contenido.

Este es el ejemplo de HTML.

<div class="card-body">
    <div id="loOrdenadoItems">
        <div class="row  mb-1" style="background-color:bisque">
            <div class="col-sm-4 col-md-8" >
                algo
            </div>
            <div class="col-sm-3 col-md-4">
                <button type="button" class="btn btn-sm btn-warning" id="btnChangeOrder">Change</button>
                <button type="button" class="btn btn-sm btn-danger" id="btnDelOrder">-</button>
            </div>
        </div>
        <div class="row mb-1" style="background-color:aqua">
            <div class="col-sm-4 col-md-8">
                algo
            </div>
            <div class="col-sm-3 col-md-4">
                <button type="button" class="btn btn-sm btn-warning" id="btnChangeOrder">Change</button>
                <button type="button" class="btn btn-sm btn-danger" id="btnDelOrder">-</button>
            </div>
        </div>
    </div>
</div>

Este es el javascript que estaba escribiendo; capturar el evento y tratar de ingresar en una variable la información de "this" que sería el presionado y luego de ello identificar al padre y al abuelo y proceder a la eliminación pero no sé como seguir. Alguna idea / solución?;

$('#btnDelOrder').on('click', function () {
    try {
        var lst = $('#btnDelOrder').this
        //var lst = $('#btnDelOrder').(this).parentNode().css("background-color", "red");
    } catch (error) {
        console.error(error);
    }
});

1 respuesta 1

2

El error está descrito por ti mismo:

Todos los botones tienen las mismas clases y Ids.

Los ID deben ser únicos, $('#btnDelOrder') te va a devolver solo el primer elemento que coincida con el selector.

Asigna el evento por clase y no por ID, de preferencia, incluyendo el contenedor general:

$('.card-body .btn-danger').on('click', function () {
    try {
        // $(this) es el botón que recibió clic, usa closest() para llegar al ancestro
        // Especifica etiqueta y clase del contenedor deseado
        let lst = $(this).closest('div.mb-1');
        $(lst).css("background-color", "red");
    } catch (error) {
        console.error(error);
    }
});
1
  • mi error era conceptual, yo estaba pensando como que si el id iba a ser tratado como si fuera una clase, con tus cambios funciona y puedo identificar el elemento. Me salvaste maestro.
    – Byron2017
    Commented el 1 oct. 2021 a las 16:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.