새 대화 상자를 만들기 전에 수동으로 이전 대화 상자를 제거해야하는 상황에 처했습니다. 다른 스레드에서, 다음과 같은 방법을 제안 하였다DOM에서 JQuery 대화 상자를 제거하는 방법
$('.ui-dialog').empty().remove();
그리고 나는이 일 것이라고 생각하지만 내가 DOM에서 제거하지 않는 다른 대화 상자가 있습니까, 나는이 방법을 없애 것이라고 생각 그들 모두. Firebug를 사용하여 페이지를 검사하면 JQuery가 사용자가 제공 한 HTML에서 대화 상자를 생성하면 표준 래퍼 div가 제공되며 모두 같은 클래스를 사용한다. 이것들은 다음과 같습니다 :
그래서 꽤 일반적이고 외부 래퍼 클래스에 대한 고유 한 특성을 찾기가 어렵습니다. 제거하고 싶은 대화 상자 만 제거하고 다른 대화 상자는 남겨 둘 수있는 방법을 찾으려고합니다. 어떤 아이디어?
SELF-ANSWER :
은 일반적으로 당신이에 따라 그것을 만들, 대화 상자를 만들 때 :그래서 내 원래의 질문에 필립의 답변에 따라 내가 근무하는 다음 방법을했다 ID 및 한 번 JQuery 대화 상자를 만듭니다 html (ID) 여전히 래퍼 아래에 있습니다.
$('.ui-dialog:has(#' + $myDialogDiv.attr('id') + ')').empty().remove();
이 첫 번째 래퍼의 내용을 비우고, 다음 DOM에서 제거 : 나는 올바른 대화 상자를 제거하고 있는지 확인하기 위해, 나는 JQuery와의 has,이 같은를 사용했다.
아이디어 덕분에 Philippe에게 감사드립니다.
DOM 준비가 된 배열을 만들고 원하는 대화 상자를 표시 할 때 원하는 대화 상자에 참조를 추가하십시오. 그런 다음 제거 할 때 배열을 jQuery에 전달하고 remove()
닫힌 대화 상자에 사용자 지정 클래스를 추가하지 않는 이유는 무엇입니까? 당신이 대화 상자를 닫습니다 때, 전화 :
thisDialog.addClass("olddialog");
그런 다음 당신은 단순히 사용하여 그들 모두를 제거 할 수
는$(".olddialog").remove();
적절한 방법은 $('#yourdialog').dialog('destroy').remove(); 당신의 대화를 추정하는 것은 적절한 ID가 있습니다.
@CalebD,이 응답을 주셔서 감사합니다. 그러나 어떤 이유로 든 jQuery가 생성하고있는 대화 상자를 제거하지는 않습니다. JQuery가 할당 한 외부 래퍼 대신 원래 선택기에서 remove()를 수행하려는 저와 관련이 있다고 가정했습니다. – BAHDev
.dialog ('destroy') 호출은 모든 래퍼를 제거하고 요소를 초기 상태로 복원 한 다음 .remove()가 DOM 밖으로 그것을 내야합니다. 어떻게 대화 상자를 만들고 있습니까? – CalebD
+1 완벽하고 2014 년에도 여전히 관련성이 있습니다! –
편집 : 당신은 필자가 방금 상태 즉-초기화를 사전에 반환 내용 만 나던 dialog.destroy을 유지하려면 수집 한 다른 의견에서
. 동적 외부 마크 아웃을 뺀 것입니까?
당신이 그들을 생성하고 참조 할 때 고유 한 'dialogClass'를 주거나 id를 광고하는 콜백을 제공하거나 요소를 대화하기 전에 ID를 추가 할 수 있습니다.
개인적으로 페이지/뷰 당 하나의 대화 상자 만 사용하고 필요에 따라 콘텐츠를 재설정합니다.
이 주제는 오래되었지만 최근에 같은 상황을 경험했습니다. 필자의 경우 동적으로 대화 상자를 만들고 .load()를 사용합니다. jQuery는 DOM으로 엉뚱한 일을하고 심각한 문제를 일으켰습니다.닫은 후에 DOM에 불필요한 "쓰레기"가 남아 있었으며 때로는 대화 상자가 제거되었습니다. 실제로 div의 내용을 사용하여 일부 상태 정보를 유지하기 때문에 내부에있는 "div"를 제거 할 수 없습니다. 다음 코드를 작성하고 제한된 방식으로 테스트하여 작동하는지 확인했습니다. jQuery가 남긴 불필요한 수하물을 모두 제거하는 것 같습니다. 나는 심지어 여러 개의 창을 열어 테스트하고 각 대화 상자의 상태가 올바르게 유지되도록 프로세스 중에 DOM 상태를 모니터링했습니다. 나는 몇 가지 코드 사업부보다 더 아무것도로드 대화 상자를 제외하고 (여기에 전체 코드를 게시 할 수 있습니다.
<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>
나는 사용자 정의 클래스를 추가 될지 모르겠어요. 기억 외부 래퍼 JQuery 그것을 제거 할 필요가 (내가 쓴 적이 html) 및 모든 밑에. 그래서 만약 내가 원래 대화 상자를 만드는 데 사용되는 div 클래스를 추가하는 것이 좋습니다, 그냥 추가 할 것이다 클래스를 래퍼 밑의 html에 추가합니다. 그런 다음 제거하려고하면 래퍼 아래에있는 내용이 제거됩니다. 원하는 외부 래퍼 만 선택할 수있는 방법이 필요합니다. 해당 선택 및 클래스 추가 또는 선택 그들과 제거, 문제는 여전히 동일합니다. 고마워. – BAHDev
그럼 당신은 사용할 수 있습니다 : $ (". UI 대화 : has (.olddialog)"). rem ove(); –