Question

我尝试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>

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 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节点？

Answer 3

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

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

Answer 4

jQuery与文本节点不匹配。您的示例中的文本不会被视为.modal中包含的节点;因此，无法通过“选择除其他节点之外的所有节点”来删除它。将文字包装在简单的<span> will do the trick。

中

jQuery为空但排除某个元素

4 个答案: