Cómo eliminar cuadros de diálogo de JQuery del DOM

Me he encontrado con una situación en la que necesito eliminar manualmente cuadros de diálogo antiguos antes de crear cuadros nuevos. En otro hilo, se sugiere el siguiente método:Cómo eliminar cuadros de diálogo de JQuery del DOM

$('.ui-dialog').empty().remove();

y creo que esto iba a funcionar, pero tengo otros cuadros de diálogo que no quiero quitar de la DOM, y creo que este método se desharía de todos ellos. La inspección de la página con Firebug muestra que una vez que JQuery crea un diálogo desde el html que usted proporciona, le da divisores de envoltura estándar, todos con las mismas clases. Estos son:

ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable

Así que son bastante genérico, y es difícil encontrar una característica única de las clases de envoltura exterior que necesitan ir. Intento encontrar una manera de eliminar solo los cuadros de diálogo que deseo eliminar, y dejar los demás. ¿Algunas ideas?

Fuente

2010-01-19 BAHDev

AUTO-RESPUESTA:

Así que basado en la respuesta de Philippe a mi pregunta original que tomó el siguiente enfoque, que trabajaron:

Al crear el diálogo, por lo general va a crear es la base de una ID, y una vez que JQuery crea el diálogo, ese html (con el ID) aún está debajo de los contenedores. Para asegurarse de que yo estaba quitando el cuadro de diálogo correcto, he usado jQuery de has, así:

$('.ui-dialog:has(#' + $myDialogDiv.attr('id') + ')').empty().remove();

Esta primera se vacía el contenido de la envoltura, y luego lo elimina de la DOM.

Gracias a Philippe por las ideas.

Fuente

2010-01-25 16:47:17 BAHDev

Cree una matriz en DOM listo y agregue referencias a los cuadros de diálogo deseados a medida que los visualiza. Luego, cuando desee eliminarlos, pase la matriz a jQuery y llame al remove()

Fuente

2010-01-19 20:52:04

¿Por qué no agrega una clase personalizada a los cuadros de diálogo que están cerrados? Así que cuando se cierra un diálogo, llame a:

thisDialog.addClass("olddialog");

, entonces puede simplemente eliminar a todos ellos usando:

$(".olddialog").remove();

Fuente

2010-01-19 20:54:52

No estoy seguro de lo que me gustaría añadir una clase personalizada a. Recuerde Necesito quitar el envoltorio externo que JQuery le da (no cualquier html que he escrito), y todo lo que hay debajo. Así que si estás sugiriendo que agregue una clase al div que originalmente usé para crear el diálogo, eso solo agregaría un clase para el html debajo de la envoltura. Luego, cuando trato de eliminarlo, sería simplemente eliminar lo que hay debajo de la envoltura. necesito una manera de seleccionar sólo las envolturas externas que quiero. si eso significa que la selección de ellos y la adición de una clase o simplemente seleccionando y eliminarlos, el problema sigue siendo el mismo. Gracias. – BAHDev

Entonces puedes usar has(): $ (". ui-dialog: has (.olddialog)"). rem ove(); –

La forma correcta es $('#yourdialog').dialog('destroy').remove(); presumiendo su diálogo tiene una identificación apropiada.

Fuente

2010-01-19 20:57:25 CalebD

@CalebD, gracias por esta respuesta, y lo he intentado. Pero por alguna razón, esto no elimina los diálogos que jQuery está creando. Supuse que tenía algo que ver conmigo tratando de eliminar() en el selector original en lugar de en las envolturas externas que JQuery asignó. – BAHDev

La llamada .dialog ('destroy') debería eliminar todas las envolturas y restaurar el elemento a su estado inicial y luego .remove() lo expulsa del DOM. ¿Cómo estás creando los diálogos? – CalebD

+1 Perfecto, ¡todavía relevante en 2014! –

EDITAR:

De otros comentarios que ha realizado el ive espigado desea conservar el contenido, sino dialog.destroy duerma apenas la vuelven a pre-init es decir estado. menos marcado externo dinámico?

podría darles un 'dialogClass' único cuando los cree y los referencia de esa manera o podría proporcionar una devolución de llamada que los anuncios un ID - o agregue el id. Antes de dialogar el elemento.

Aunque, personalmente, solo uso un diálogo por página/vista y simplemente reinicio el contenido según sea necesario.

Fuente

2010-01-19 20:57:31 prodigitalson

Sé que este tema es antiguo, pero recientemente me encontré con la misma situación. Para mi caso, creo dinámicamente diálogos y uso .load(). jQuery realmente hace cosas alocadas con el DOM y me estaba causando problemas importantes.Hubo "basura" innecesaria en el DOM después del cierre y, a veces, eliminando el diálogo. No pude eliminar el "div" del que estaba dentro porque en realidad uso los contenidos del div para mantener cierta información del estado. Se me ocurrió el siguiente código y lo probé de forma limitada para verificar que funcionara. Parece que elimina todo el equipaje innecesario que jQuery estaba dejando atrás. Incluso probé abriendo varias ventanas y supervisé el estado del DOM durante el proceso para asegurar que el estado de cada diálogo se mantuviera correctamente. Voy a publicar el código completo aquí (con la excepción del cuadro de diálogo cargado, que no era más que un div con un poco de código en él.

<html> 
     <head> 
      <link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" /> 
      <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
      <script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script> 

      <script type="text/javascript"> 
       $(document).ready (function() { 
        $("#openDialog").click (function() { 
         $("<div></div>") 
          .load ("loadDialogTest.php") 
          .appendTo ($("#containingDiv")) 
          .dialog ({ 
          autoOpen: 'false', 
          title: 'Test This!', 
          close: function() { 
           $(this).dialog ('destroy').remove(); 
          } 
         }).dialog ('open'); 
        }); 
       }); 
      </script> 
     </head> 

     <body> 
      <a href="#" id="openDialog">Open it</a> 

      <div id="containingDiv"> 
      </div> 
     </body> 

    </html>

Fuente

2010-06-11 13:50:48 Dave

Cómo eliminar cuadros de diálogo de JQuery del DOM

Respuesta

Cuestiones relacionadas