我有jquery选项卡,当我点击小x关闭它时,调用我的委托并删除标签部分,但标签内容不是。在开发工具中,我仍然在dom中看到它。我似乎也没有收到任何错误。只是想知道是否有人知道为什么?请注意,我在标签内容中使用了ace编辑器,但我认为这不重要。
在我删除dom之前看起来像:
<div id="tabs" style="padding: 0; margin: 0; height: 100%" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul id="tabFiles" class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all ui-sortable" role="tablist">
<li id="App.lua.tab" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active ui-sortable-handle" role="tab" tabindex="0" aria-controls="App.lua.content" aria-labelledby="ui-id-1" aria-selected="true" aria-expanded="true">
<a href="#App.lua.content" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">App.lua</a>
<span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span>
</li>
</ul>
<div id="App.lua.content" style="padding: 0px; margin-left: 0px; display: block;" aria-labelledby="ui-id-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-hidden="false">
<div id="App.lua.editor" class="editor ace_editor ace-chrome">
<textarea class="ace_text-input" wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" style="opacity: 0; height: 14px; width: 6.5978125px; left: 51px; top: 0px;"></textarea>
<div class="ace_gutter"><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px; height: 626px; width: 47px;">
<div class="ace_gutter-cell " style="height: 14px;">1</div>
<div class="ace_gutter-cell " style="height: 14px;">2<span class="ace_fold-widget ace_start ace_open" style="height: 14px;"></span>
</div>
<div class="ace_gutter-cell " style="height: 14px;">3</div>
<div class="ace_gutter-cell " style="height: 14px;">4</div><div class="ace_gutter-cell " style="height: 14px;">5</div><div class="ace_gutter-cell " style="height: 14px;">6</div><div class="ace_gutter-cell " style="height: 14px;">7</div><div class="ace_gutter-cell " style="height: 14px;">8</div><div class="ace_gutter-cell " style="height: 14px;">9</div><div class="ace_gutter-cell " style="height: 14px;">10</div><div class="ace_gutter-cell " style="height: 14px;">11</div><div class="ace_gutter-cell " style="height: 14px;">12</div><div class="ace_gutter-cell " style="height: 14px;">13</div><div class="ace_gutter-cell " style="height: 14px;">14</div><div class="ace_gutter-cell " style="height: 14px;">15</div><div class="ace_gutter-cell " style="height: 14px;">16</div><div class="ace_gutter-cell " style="height: 14px;">17</div><div class="ace_gutter-cell " style="height: 14px;">18</div><div class="ace_gutter-cell " style="height: 14px;">19</div><div class="ace_gutter-cell " style="height: 14px;">20</div><div class="ace_gutter-cell " style="height: 14px;">21</div><div class="ace_gutter-cell " style="height: 14px;">22</div><div class="ace_gutter-cell " style="height: 14px;">23</div><div class="ace_gutter-cell " style="height: 14px;">24</div><div class="ace_gutter-cell " style="height: 14px;">25</div><div class="ace_gutter-cell " style="height: 14px;">26</div><div class="ace_gutter-cell " style="height: 14px;">27</div><div class="ace_gutter-cell " style="height: 14px;">28</div><div class="ace_gutter-cell " style="height: 14px;">29</div><div class="ace_gutter-cell " style="height: 14px;">30</div><div class="ace_gutter-cell " style="height: 14px;">31</div><div class="ace_gutter-cell " style="height: 14px;">32<span class="ace_fold-widget ace_start ace_open" style="height: 14px;"></span></div><div class="ace_gutter-cell " style="height: 14px;">33</div><div class="ace_gutter-cell " style="height: 14px;">34</div><div class="ace_gutter-cell " style="height: 14px;">35</div><div class="ace_gutter-cell " style="height: 14px;">36</div><div class="ace_gutter-cell " style="height: 14px;">37</div><div class="ace_gutter-cell " style="height: 14px;">38<span class="ace_fold-widget ace_start ace_open" style="height: 14px;"></span></div><div class="ace_gutter-cell " style="height: 14px;">39</div><div class="ace_gutter-cell " style="height: 14px;">40</div><div class="ace_gutter-cell " style="height: 14px;">41</div><div class="ace_gutter-cell " style="height: 14px;">42</div><div class="ace_gutter-cell " style="height: 14px;">43</div><div class="ace_gutter-cell " style="height: 14px;">44</div></div><div class="ace_gutter-active-line" style="top: 0px; height: 14px;"></div></div><div class="ace_scroller" style="left: 47px; right: 17px; bottom: 0px;"><div class="ace_content" style="margin-top: 0px; width: 956px; height: 626px; margin-left: 0px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 531.825px; visibility: visible;"></div></div><div class="ace_layer ace_marker-layer"><div class="ace_active-line" style="height:14px;top:0px;left:0;right:0;"></div></div><div class="ace_layer ace_text-layer" style="padding: 0px 4px;"><div class="ace_line" style="height:14px"><span class="ace_comment">--This function will be called once when the program starts</span></div><div class="ace_line" style="height:14px"><span class="ace_keyword">function</span> <span class="ace_identifier">App</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Start</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Initialize Steamworks (optional)</span></div><div class="ace_line" style="height:14px"> <span class="ace_identifier">Steamworks</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Initialize</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Set the application title</span></div><div class="ace_line" style="height:14px"> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">title</span><span class="ace_keyword ace_operator">=</span><span class="ace_string">"MyGame"</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Create a window</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">local</span> <span class="ace_identifier">windowstyle</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">Window</span>.<span class="ace_identifier">Titlebar</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">if</span> <span class="ace_identifier">System</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">GetProperty</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"fullscreen"</span><span class="ace_paren ace_rparen">)</span><span class="ace_keyword ace_operator">==</span><span class="ace_string">"1"</span> <span class="ace_keyword">then</span> <span class="ace_identifier">windowstyle</span><span class="ace_keyword ace_operator">=</span><span class="ace_identifier">windowstyle</span><span class="ace_keyword ace_operator">+</span><span class="ace_identifier">Window</span>.<span class="ace_identifier">FullScreen</span> <span class="ace_keyword">end</span></div><div class="ace_line" style="height:14px"> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">window</span><span class="ace_keyword ace_operator">=</span><span class="ace_identifier">Window</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Create</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_language">self</span>.<span class="ace_identifier">title</span>,<span class="ace_constant ace_numeric">0</span>,<span class="ace_constant ace_numeric">0</span>,<span class="ace_identifier">System</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">GetProperty</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"screenwidth"</span>,<span class="ace_string">"1024"</span><span class="ace_paren ace_rparen">)</span>,<span class="ace_identifier">System</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">GetProperty</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"screenheight"</span>,<span class="ace_string">"768"</span><span class="ace_paren ace_rparen">)</span>,<span class="ace_identifier">windowstyle</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">window</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">HideMouse</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Create the graphics context</span></div><div class="ace_line" style="height:14px"> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">context</span><span class="ace_keyword ace_operator">=</span><span class="ace_identifier">Context</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Create</span><span class="ace_paren ace_lparen">(</span><span class="ace_variable ace_language">self</span>.<span class="ace_identifier">window</span>,<span class="ace_constant ace_numeric">0</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">if</span> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">context</span><span class="ace_keyword ace_operator">==</span><span class="ace_constant ace_language">nil</span> <span class="ace_keyword">then</span> <span class="ace_keyword">return</span> <span class="ace_constant ace_language">false</span> <span class="ace_keyword">end</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Create a world</span></div><div class="ace_line" style="height:14px"> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">world</span><span class="ace_keyword ace_operator">=</span><span class="ace_identifier">World</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Create</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">world</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">SetLightQuality</span><span class="ace_paren ace_lparen">((</span><span class="ace_identifier">System</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">GetProperty</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"lightquality"</span>,<span class="ace_string">"1"</span><span class="ace_paren ace_rparen">)))</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Load a map</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">local</span> <span class="ace_identifier">mapfile</span> <span class="ace_keyword ace_operator">=</span> <span class="ace_identifier">System</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">GetProperty</span><span class="ace_paren ace_lparen">(</span><span class="ace_string">"map"</span>,<span class="ace_string">"Maps/start.map"</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">if</span> <span class="ace_identifier">Map</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Load</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">mapfile</span><span class="ace_paren ace_rparen">)</span><span class="ace_keyword ace_operator">==</span><span class="ace_constant ace_language">false</span> <span class="ace_keyword">then</span> <span class="ace_keyword">return</span> <span class="ace_constant ace_language">false</span> <span class="ace_keyword">end</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_keyword">return</span> <span class="ace_constant ace_language">true</span></div><div class="ace_line" style="height:14px"><span class="ace_keyword">end</span></div><div class="ace_line" style="height:14px"></div><div class="ace_line" style="height:14px"><span class="ace_comment">--This is our main program loop and will be called continuously until the program ends</span></div><div class="ace_line" style="height:14px"><span class="ace_keyword">function</span> <span class="ace_identifier">App</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Loop</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--If window has been closed, end the program</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">if</span> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">window</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Closed</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span> <span class="ace_keyword">or</span> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">window</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">KeyDown</span><span class="ace_paren ace_lparen">(</span><span class="ace_identifier">Key</span>.<span class="ace_identifier">Escape</span><span class="ace_paren ace_rparen">)</span> <span class="ace_keyword">then</span> <span class="ace_keyword">return</span> <span class="ace_constant ace_language">false</span> <span class="ace_keyword">end</span></div><div class="ace_line" style="height:14px"> </div><div class="ace_line" style="height:14px"> <span class="ace_comment">--Handle map change</span></div><div class="ace_line" style="height:14px"> <span class="ace_keyword">if</span> <span class="ace_identifier">changemapname</span><span class="ace_keyword ace_operator">~=</span><span class="ace_constant ace_language">nil</span> <span class="ace_keyword">then</span></div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> </div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> <span class="ace_comment">--Clear all entities</span></div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> <span class="ace_variable ace_language">self</span>.<span class="ace_identifier">world</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Clear</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> </div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> <span class="ace_comment">--Load the next map</span></div><div class="ace_line" style="height:14px"><span class="ace_indent-guide"> </span> <span class="ace_identifier">Time</span><span class="ace_keyword ace_operator">:</span><span class="ace_identifier">Pause</span><span class="ace_paren ace_lparen">(</span><span class="ace_paren ace_rparen">)</span></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor" style="left: 4px; top: 0px; width: 6.5978125px; height: 14px;"></div></div></div></div><div class="ace_scrollbar ace_scrollbar-v" style="width: 22px; bottom: 0px;"><div class="ace_scrollbar-inner" style="width: 22px; height: 1162px;"></div></div><div class="ace_scrollbar ace_scrollbar-h" style="display: none; height: 22px; left: 47px; right: 17px;"><div class="ace_scrollbar-inner" style="height: 22px; width: 956px;"></div></div><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; overflow: hidden;"><div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; overflow: visible;"></div>
<div style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; overflow: visible;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div></div>
</div>
</div>
</div>
App.lua.editor div中显然有很多东西,但是这些都是由ace编辑器库提供的。
这是我用来删除标签及其内容
的内容var tabs = $("#tabs").tabs();
tabs.delegate( "span.ui-icon-close", "click", function() {
if(confirm("Are you sure you want to close?") == false){
return;
}
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
alert(panelId);
$("#" + panelId).remove();
tabs.tabs("refresh");
});
如前所述,标签li确实已被删除,但App.lua.content div仍保留在DOM中,即使panelID为&#34; App.lua.content&#34;在警报中。我假设什么都不能阻止从DOM中删除元素?
答案 0 :(得分:2)
这是因为ID包含.
,因此选择器会选择ID为App
但具有lua
和content
类的元素。尝试逃避点:
$("#" + panelId.replace(/\./g, '\\.')).remove();