jQuery为空但排除某个元素

Posted 2023-03-05

【中文标题】jQuery为空但排除某个元素

【英文标题】：jQuery empty but exclude a certain element

【发布时间】：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 好的，我必须接受！感谢您的编辑：-*

【参考方案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);

【讨论】：

嗯，不是很优雅，嗯？！

那么你希望它是怎样的呢？一个班轮多一点。