jquery - jQuery为空但排除某个元素

Question

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

到目前为止我已经尝试过：

$('.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>

Answer 1

可以这样做：

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

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

Answer 2

我不确定一个错误，但我能看到的最简单的方法是：

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

JS 小提琴演示。

更好的方法（在多个.close元素的错误假设下）：

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

JS 小提琴演示。

使用 jQueryeach()和纯 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 小提琴演示。

以及JS Perf 方法的比较。毫不奇怪，使用纯 JavaScript 可以明显加快速度，尽管我认为它读起来很丑（尽管我不确定它实际上会变得更漂亮）。

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

Answer 3

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

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

Answer 4

jQuery 不匹配文本节点。您示例中的文本不被视为 .modal 中包含的节点；因此，它不能通过“选择除某些其他节点之外的所有节点”来删除。将文本包装成一个简单的<span> 就可以了。