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);
}
});