0

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>&nbsp;&nbsp;<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">&nbsp;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

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

Pero el elemento que necesito borrar es el elemento superior a este div introducir la descripción de la imagen aquí

1 respuesta 1

1

Puedes hacerlo pasandole al método filter una función anónima que obtenga el elemento con el data-id que te interesa:

var id = 2;
$('.element').filter(function(){
  return $(this).attr('data-id') == id;
}).remove();
li {
list-style-type:none;
border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
<li class="element" data-id="1">elm 1</li>
<li class="element" data-id="2">elm 2</li>
<li class="element" data-id="3">elm 3</li>
<li class="element" data-id="4">elm 4</li>
</ol>


UPDATE:

Si lo que necesitas es borrar el elemento padre, puedes hacerlo con el método closest. Este método permite obtener el primer elemento "padre" con el selector que le pases. Así pues, sabiendo que el elemento padre del elemento div que has capturado es un elemento li con clase action-element, puedes hacer:

Capturas el div;

var id = 2;

var div =  $('.element').filter(function(){
  return $(this).attr('data-id') == id;
});

Y ahora eliminas el elemento padre:

div.closest('.action-element').remove();

También lo puedes hacer todo "de golpe":

$('.element').filter(function(){
  return $(this).attr('data-id') == id;
}).closest('.action-element').remove();
3
  • Gracias @cooper , te he respondido en el primer post, el problema que tengo que necesito subir un "elemento" más que el div, necesito cojer el li
    – ilernet
    Commented el 20 sept. 2020 a las 18:24
  • @ilernet, respuesta actualizada.
    – cooper
    Commented el 20 sept. 2020 a las 18:38
  • muchas gracias, problema solucionado. 1000 gracias
    – ilernet
    Commented el 20 sept. 2020 a las 19:09

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.