接着，我需要删除该DOM元素，一般来说，正常的做法都是$("#test").empty();这行简单的代码就完成了！这样有效吗？！当执行完这样代码后，你再用$('#dialog')来获取dialog元素，郁闷的事情发生了，既然获取到了！为什么！不是已经empty了吗！
我们把注意点放到$('#dialog').dialog上面，然后看看JQuery的实现代码是如何写的，当我们跟踪代码到dialog类中的_create方法的时候，问题的原因找到了，看下面这段代码：
uiDialog = (self.uiDialog = $('
'))
.appendTo(document.body)
.hide()
.addClass(uiDialogClasses + options.dialogClass)
.css({
zIndex: options.zIndex
})
// setting tabIndex makes the div focusable
// setting outline to 0 prevents a border on focus in Mozilla
.attr('tabIndex', -1).css('outline', 0).keydown(function(event) {
if (options.closeOnEscape && event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
self.close(event);
event.preventDefault();
}
})
.attr({
role: 'dialog',
'aria-labelledby': titleId
})
.mousedown(function(event) {
self.moveToTop(false, event);
}),
中移除，加入到该新的div中.....
这就是为什么我们$("#test").empty()后，却对内部的dialog没有起作用了！而且这有一个最不好的一个地方，也是最容易出现内存泄露的地方：它动态的在Body中创建了一个div，这样如果窗体不关闭的话，而你又在不察觉的情况下不断的使用上面的TestAppend方法来动态加载DOM，就会创建N个这样的div！
其实这个问题郁闷的地方不是在如何解决，而且隐藏的很深，很难发现！那么发现之后解决起来就变的简单多了：
if ($('#dialog')[0]) {
$('#dialog').parent().empty();
$('#dialog').parent().remove();
}
当前加上这段后代码后，再做$("#dialog")来测试下，期望的结果终于出现了！dialog元素消失了！
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
