1

Tengo un código con jquery que me genera dos listas drag and drop, donde puedo mover elementos de la derecha a izquierda(esto me funciona) el problema lo tengo cuando quiero generar un botón para cada item de "borrar" como identificar cada elemento "li" para poder borrarlo.

Tengo algo como esto

introducir la descripción de la imagen aquí

El html resultante es este

<ol class="ui-sortable">
                        
  <li data-id="2" class="ui-draggable ui-draggable-handle newClass">
  <div style="min-height: 50px;min-width: 100px">
  <div style="float:left" class="titleField">Campo de Foto</div>
  <div style="float:right" class="btnDeleteItem">
  <button class="btn btn-warning">Eliminar</button>
  </div>
  </div>
  </li>

  <li data-id="3" class="ui-draggable ui-draggable-handle newClass">
  <div style="min-height: 50px;min-width: 100px">
  <div style="float:left" class="titleField">Campo de Firma</div>
  <div style="float:right" class="btnDeleteItem">
  <button class="btn btn-warning">Eliminar</button></div>
  </div>
  </li>

  <li data-id="3" class="ui-draggable ui-draggable-handle newClass">
  <div style="min-height: 50px;min-width: 100px">
  <div style="float:left" class="titleField">Campo de Firma</div>
  <div style="float:right" class="btnDeleteItem">
  <button class="btn btn-warning">Eliminar</button></div>
  </div>
  </li>
  
</ol>

Desde jquery puedo capturar la acción del botón de esta forma y borrar el "li"

        $(document).on('click', '.btnDeleteItem', function(event) {
        $("li").find("[data-id='***id***']").remove();
    });

Aquí lo que me faltaría que no consigo como hacer es conseguir el atributo "data-id" de cada elemento

Gracias

0

1 respuesta 1

1

Podes obtener el data-id del li utilizando así:

Ejemplo:

$(document).on('click', '.btnDeleteItem', function(event) {
  let $li = $(event.currentTarget).closest("li");
  $li.remove();
  console.log($li.data('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ol class="ui-sortable">

  <li data-id="2" class="ui-draggable ui-draggable-handle newClass">
    <div style="min-height: 50px;min-width: 100px">
      <div style="float:left" class="titleField">Campo de Foto</div>
      <div style="float:right" class="btnDeleteItem">
        <button class="btn btn-warning">Eliminar</button>
      </div>
    </div>
  </li>

  <li data-id="3" class="ui-draggable ui-draggable-handle newClass">
    <div style="min-height: 50px;min-width: 100px">
      <div style="float:left" class="titleField">Campo de Firma</div>
      <div style="float:right" class="btnDeleteItem">
        <button class="btn btn-warning">Eliminar</button></div>
    </div>
  </li>

  <li data-id="3" class="ui-draggable ui-draggable-handle newClass">
    <div style="min-height: 50px;min-width: 100px">
      <div style="float:left" class="titleField">Campo de Firma</div>
      <div style="float:right" class="btnDeleteItem">
        <button class="btn btn-warning">Eliminar</button></div>
    </div>
  </li>

</ol>

1
  • Muchas gracias @Marcos
    – ilernet
    Commented el 11 sept. 2020 a las 15:28

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.