Tengo este código de la consola del navegador que proviene de Javascript del complemento de tablas de datos (Todos los códigos están acortados):
<div class="dataTables_length" id="mytable_length"> <label> "عرض " <select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select> "نتائج" </label> </div>y debajo de este código tengo este código (Todos los códigos están acortados):
<div id="mytable_filter" class="dataTables_filter"> <label> "بحث: " <input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable"> </label> </div>Esta es una imagen tomada desde la consola del navegador solo para aclarar las cosas https://i.stack.imgur.com/UeLz9.png
Ahora necesito eliminar la etiqueta principal <div id="mytable_filter" class="dataTables_filter"> y tomar/mover las etiquetas secundarias con la label de elementos y input y agregarlas debajo de <div class="dataTables_length" id="mytable_length"> usando jQuery. Entonces el código final será:
<div class="dataTables_length" id="mytable_length"> <label> "عرض " <select name="mytable_length" aria-controls="mytable" class="form-select form-select-sm"></select> "نتائج" </label> <label> "بحث: " <input type="search" class="form-control form-control-sm" placeholder="" aria-controls="mytable"> </label> </div>usando jQuery, lo que hice hasta ahora es:
$(document).ready(function(){ $('#mytable').DataTable({ initComplete: function () { $('.dataTables_filter').remove(); }, }); }); pero esto solo eliminará <div id="mytable_filter" class="dataTables_filter"> con sus etiquetas secundarias, y eso no es lo que necesito. ¿Cómo puedo hacer esto?
Necesito eliminar la etiqueta principal
<div id="mytable_filter" class="dataTables_filter">y tomar/mover las etiquetas secundarias con la etiqueta de elementos y la entrada y agregarlas debajo de<div class="dataTables_length" id="mytable_length">
Agregar nodos a un contenedor dado es una operación básica en jQuery. Selecciona los nodos, usa .appendTo() , listo.
$(function () { $('#mytable').DataTable({ initComplete: function () { $('.dataTables_filter').children().appendTo('#mytable_length'); $('.dataTables_filter').remove(); }, }); });Un nodo DOM solo puede tener un padre. Si lo agrega a un padre diferente, se eliminará efectivamente de su padre actual.