tengo una lista de elementos que tienen esta estructura
<ol class="ui-sortable">
<li class="action-element ui-draggable ui-draggable-handle newClass" data-id="photoType">
<div data-id="1" class="element boxElementPicture">
<div style="float: right"><i class="fas fa-trash btnDeleteItem" data-type="btnImgPhoto" id="1" data-id="1" style=""></i> <i class="fas fa-th-list btnOptionsItem" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo" style=""></i></div>
<div><span class="titleField" "="">Campo de Foto</span><br>
<input type="text" placeholder="Titulo..." class="title"><br>
<input type="checkbox" class="chbRequired"><br>
<span class="requiredField"> Campo requerido</span></div>
</div>
</li>
</ol>
Esto visualmente genera una caja de texto con un botón de eliminar que tiene el atributo data-id, que luego uso para lanzar un modal de boostrap y preguntar al usuario si quiere borrar el elemento o no.
El código que realiza esto es este
$(document).on('click', '.btnModalDeleteItem', function(event) {
var id = $('.btnDeleteItem').attr('data-id');
$('#deleteModal').attr('data-id',id);
$('.element').filter('[data-id='+id+']').remove();
$('#deleteModal').modal('hide');
});
Con este código lo que hago es pasar el attributo data-id del botón para poder capturarlo en el botón del modal (botón de borrar) y al hacer click en dicho botón borrar el elemento.
Como vereis el elemento html que muestro al principio de todo es un "li" y yo tengo el data-id del elemento "inferior" el div con la clase boxElementPicture
El problema lo tengo que con esta instrucción borro el elemento "div" pero me dejo el "li" vacio , la pregunta es como a partir del "div" borrar desde el elemento superior el "li"
La instrucción tal como pongo anteriormente es esta
$('.element').filter('[data-id='+id+']').remove();
Respondiendo al compañero @cooper
La solución que me has propuesto hace lo mismo que el código que tengo yo , borra el elemento div , es decir esto
Pero el elemento que necesito borrar es el elemento superior a este div