我的HTML中有一些元素完全由jQuery生成，然后在不再需要时删除。
这些方面的东西：
var div = $('<div/>').attr('id', 'addedItem');
$('body').append(div);
例如，当我们关闭时，我们会这样做：
$('#addedItem').remove();
但是......在使用过程中，我们可能会更改addedItem的类，因为它会添加另一个功能，例如，将tinyMCE添加到textArea < / p>
$('#textAreaId').tinymce({ vars });
在文本区域添加富文本编辑器（提供所有正确的脚本），我在tinymce()末尾添加了一个新行：
$(applyTo).addClass('editorLoaded');
阻止代码尝试将编辑器添加到同一元素两次。
这一切都很可爱......但是......
如果我关闭此窗口然后调用行$('#addedItem').remove();然后再打开（没有页面重新加载）我想重新添加到页面并再次显示，添加到元素的类仍然存在。< / p>
所以，简而言之。一个ID为addedItem的元素被jQuery添加到body，对它做了一些事情并且它获得了一个类属性。完成后，jQuery完全删除了元素。稍后，我们再次使用jQuery向addedItem添加一个ID body的新元素，它是一个新元素，但它在删除之前保留了它的类属性！
根据jQuery DOCS remove()行为应该是：
除了元素本身，所有绑定事件和jQuery 与元素相关联的数据将被删除。
我认为它应该删除使用jQuery以及数据等添加到元素中的任何类...也许我读错了，误解了，或者别的什么！
任何人都可以帮我删除浏览器内存/缓存中的这些元素和对它们的所有引用/所以我可以管理这个问题。
jQuery版本是1.7.1，如果有任何帮助
========== EDIT＆gt;更多代码已添加================
上面概述了我的问题，这是实际的代码
// create a modal window with a top right X closer from any element
$.fn.makeModal = function (vars) {
var theId = $(this).attr('id');
var exists = false;
try {
if ($('#' + theId + '_wrap').length > 0) { // firstly check the element has already been "made modal"
exists = true;
};
} catch (err) {
exists = false;
};
if (!exists) { // if this is the first time
var win = this;
var h;
var w;
var persist;
var alert;
if (vars) {
h = vars.height;
w = vars.width;
persist = vars.persist;
alert = vars.alert;
};
if (typeof h == "string") {
h = (h.replace('px', '') * 1); // clean out px if dimensions posted in px
};
if (typeof w == "string") {
w = (w.replace('px', '') * 1); // clean out px if dimensions posted in px
};
var hRatio = 0.70;
var wRatio = 0.5;
var minW = 480;
if (!h) { h = $(window).height() * hRatio }; // default case if no height passed
if (!w) {
w = $(window).width() * wRatio;
minW = 480;
if (w < minW) { w = minW };
}; // default case if no width passed
// **** END BASIC VARIABLES
var wrapper = $('<div/>').attr('id', theId + '_wrap').addClass('modalContainer').css({ 'top': ($(window).height() - h) / 2, 'left': ($(window).width() - w) / 2, 'width': w, 'height': h }); // create a wrapper for the main content
var close = $('<span/>').addClass('closeModal').html('X').css({ 'z-index': getMaxZIndex() + 5 });
// creat close button
if (alert) {
$(close).addClass('alert');
$(wrapper).addClass('alert');
} else {
$(close).addClass('cross');
};
if (persist) {
$(wrapper).addClass('persist');
}; // persist variable allows you to determine whether to delete or simply hide element on close
$(win).addClass('modalContent').css({ 'display': 'block', 'width': w - 20, 'height': h - 20 }).appendTo(wrapper);
$('body').append(wrapper).opaqueBg();
$(wrapper).prepend(close).fadeIn('fast').css({ 'z-index': getMaxZIndex() + 3 });
$(close).modalCloser();
$(document).on('keyup', function (e) {
if (e.keyCode == 27) {
closeModal(wrapper);
$(document).unbind('keyup');
};
});
} else {
$('body').opaqueBg();
$('#' + theId + '_wrap').fadeIn('fast') // .children().css({ 'display': 'block' });
};
// END OF MODAL WINDOWS
};
上面的jQuery函数从动态创建的任何元素中创建一个模态窗口。
关闭等相关功能：
// top right X closer actions
$.fn.modalCloser = function (callBack) {
$(this).bind('click', function () {
$(this).closest('div.modalContainer').fadeOut(function () {
closeModal(this, callBack);
});
});
};
// close modal element by item
function closeModal(ele, callBack) {
if (!ele) {
ele = '.modalContainer'
};
if ($(ele).hasClass('noClose')) {
alert("Please wait... we're working on something.");
} else {
$(ele).fadeOut(function () {
var nextZ = getMaxZIndex('.modalContainer');
if (nextZ > 0) {
$('#screenBlank').css({ 'z-index': nextZ });
} else {
$('#screenBlank').fadeOut(function () { $(this).remove(); });
};
if (!$(this).hasClass('persist')) {
$(this).remove();
};
if (callBack) {
callBack();
};
});
};
};
// end modal window controls
// ****************************************************************************************************************************************************************
// create opaque background for modal window to sit on
$.fn.opaqueBg = function () {
$('#screenBlank').remove();
var z = getMaxZIndex() + 2;
var sb = $('<div/>').attr('id', 'screenBlank').addClass('noPrint centreLoader').css({ 'display': 'none', 'position': 'absolute', 'text-align': 'center', 'z-index': z, 'background-color': 'rgba(10, 0, 0, 0.7)', 'width': '100%', 'height': $(document).height(), 'top': '0px', 'left': '0px' });
$('body').prepend(sb);
$(sb).fadeIn().bind('click', function () {
closeModal('.modalContainer');
});
};
// find the maximum z-Index of elements on the page, used to ensure tooltips are always shown above anything else
// note, this will only work if major containing elements have explicitly set z-index
function getMaxZIndex(ele) {
if (!ele) {
ele = "div";
};
var zIndexMax = 0;
$(ele).each(function () {
if ($(this).css('display') != "none") {
var z = parseInt($(this).css('z-index'));
if (z > zIndexMax) { zIndexMax = z };
};
});
return zIndexMax;
};
// end finding maximum z-index
因此，以上所有内容都是我项目中各种用途的通用函数集。
提示这篇文章的特殊目的是在应用了tinymce的模态窗口中创建一个textarea，其工作原理如下：
$('#notePad .plus').on('click', function () {
var h = $('<h2/>').html('Add Note');
var txt = $('<textarea/>').attr('id', 'noteEditorContent').attr('name', 'newNote').css({ 'width': '100%', 'height': '400px' });
var wrpper = $('<div/>').css({ 'width': '750', 'height': '380', 'margin': 'auto' }).append(txt);
var button = $('<span/>').addClass('greenButton').html('Save').css({ 'float': 'right', 'margin': '40px 20px 0px 20px', 'width': '80px' }).bind('click', function () {
saveStaffNote($('#noteEditorContent').val(), true);
});
var div = $('<div>').attr('id', 'notePadEditor').append(h).append(wrpper).append(button);
$(txt).richEditor('simple', function () {
$(div).makeModal({ 'width': '800', 'height': '530', 'persist': true });
// CALLING THE makeModal() function above
});
});
最后，tinymce的应用就是这个功能：
// === loading Rich Text Editors //
$.fn.richEditor = function (theTheme, callBack) {
var applyTo = this;
var tinyMceVars = {
// Location of TinyMCE script
script_url: '/Admin/Plugins/richEditor/tiny_mce.js',
// General options
theme: theTheme,
plugins: "autolink,lists,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,advlist",
// Theme options
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,formatselect,fontselect,fontsizeselect,|,bullist,numlist,|,undo,redo,|,code,preview,fullscreen,|,cleanup,help",
theme_advanced_buttons2: "cut,copy,paste,pastetext,|,insertdate,inserttime,|,link,unlink,anchor,image,|,forecolor,backcolor,|,search,replace",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,charmap,emotions,iespell",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
relative_urls: false,
remove_script_host: false,
document_base_url: window.location.protocol + "//" + window.location.hostname,
external_link_list_url: window.location.protocol + "//" + window.location.hostname + "/Admin/Scripts/Lists/link_list.js",
external_image_list_url: window.location.protocol + "//" + window.location.hostname + "/Admin/Scripts/Lists/image_list.js"
};
if ($(applyTo).hasClass('editorLoaded') == false) {
try { // try to apply the editor, if fails it's because the scripts are not loaded, so load them!
$(applyTo).tinymce(tinyMceVars);
} catch (err) {
$.getScript("/Admin/Plugins/richEditor/jquery.tinymce.js", function () {
$(applyTo).tinymce(tinyMceVars);
});
} finally { // finally apply richEdit class to avoid re-writing and perform a callback if required
$(applyTo).removeClass('richEdit').addClass('editorLoaded');
if (callBack) {
callBack();
};
};
};
};
答案 0 :(得分：0)
我相信你的问题是你正在将类添加到jQuery对象中，该对象也被称为div的变量引用。尝试在函数内部对变量进行处理（javascript具有函数范围）。
试试这个：
var addItem = function(){
var div = $('<div/>').attr('id', 'addedItem');
$('body').append(div);
};
addItem();
$('#addedItem').addClass('weeeeeee');
$('#addedItem').remove();
addItem();