jQuery为空但排除某个元素答案

【问题标题】：jQuery empty but exclude a certain elementjQuery为空但排除某个元素
【发布时间】：2012-12-27 14:27:45
【问题描述】：

我尝试 empty() 一个 div 但排除特定选择器。

到目前为止I've tried 是什么：

$('.modal').find('.close').nextAll().empty();
$('.modal').find(':not(.close)').empty();
$('.modal').not('.close').empty();
$('.modal:not(.close)').empty();

HTML：

<div class="modal">
  <a href="#" class="close">Close</a>
  ...I've the need to be removed...
</div>

【问题讨论】：

请给我们展示一个 HTML 示例。
已经完成了，看看fiddle...
您的 HTML 应该在 问题本身 中，否则当 JS Fiddle 倒下时（而且确实如此，半频繁）这个问题变得毫无用处，作为其他人的资源相同或相似的问题。
@DavidThomas 好的，我必须接受！感谢您的编辑：-*

标签： jquery jquery-selectors selector removechild

【解决方案1】：

可以这样做：

http://fiddle.jshell.net/KLh4E/11/

$(".modal").contents().filter(function(){
    return !$(this).is('.close');
}).remove();

【讨论】：

@ErickAstoOblitas 我真的不确定链接与问题的关系如何？
@yckart 如果您的“...我需要删除...”是一组已定义的元素，例如输入、跨度等，您可以使用$('input', $('.modal')).remove()、$('span', $('.modal')).remove()

【解决方案2】：

我不确定是否存在错误，但我能看到的最简单的方法是：

var el = $('.close');
$('.modal').empty().append(el);

JS Fiddle demo.

稍微好一点的方法（基于多个.close 元素的错误假设）：

$('.modal').each(
  function(){
    var that = $(this),
        el = that.find('.close');
    that.empty().append(el)
  });

JS Fiddle demo.

结合使用 jQuery each() 和纯 JavaScript 函数：

function fratricide(el) {
  while (el.previousSibling) {
    el.parentNode.removeChild(el.previousSibling);
  }
  while (el.nextSibling) {
    el.parentNode.removeChild(el.nextSibling);
  }
}

$('.close').each(

function() {
  fratricide(this);
});

JS Fiddle demo.

还有一个JS Perf comparison of approaches。毫不奇怪，使用纯 JavaScript 可以显着加快速度，尽管我认为它读起来很丑（尽管我不确定它实际上可以变得更漂亮）。

有趣的是（对我来说，无论如何，现在我已经更新了之前链接的 JS Perf）使用变量来存储对 el.parentNode 的引用产生的差异可以忽略不计，大概是因为尽管保存了对元素/节点的引用仍然需要访问 DOM 才能找到 el.previousSibling 节点？

【讨论】：

嗯，不是很优雅，嗯？！
不，这就是我现在正在探索的内容... =) 您的实际页面是否有多个 .close 元素？（我假设它确实......）
谢谢！ 'T 仍然不漂亮，虽然... =)
当然，但想法很重要 ;)

【解决方案3】：

jQuery 不匹配文本节点。您示例中的文本不被视为 .modal 中包含的节点；因此，它不能通过“选择除某些其他节点之外的所有节点”来删除。用简单的 <span> will do the trick 包裹文本。

【讨论】：

【解决方案4】：

你可以试试这个：http://fiddle.jshell.net/KLh4E/3/

var div = $('.modal').clone().find('a');
$('.modal').empty().html(div);

【讨论】：

嗯，不是很优雅，嗯？！
那么你希望它是怎样的呢？一个班轮多一点。