显示元素的一部分但隐藏其余部分的好方法是什么？

Question

I was wanting to have a javascript (jQuery) function that removed everything that didn't have the safe class.

The problem is, if the parent element is hidden, it cannot show the 'safe' part of it.

Is there a simple way to get around this? I'd rather not go in and span all of the elements that need removed.

trimmer = function(element){
    x = $(element+' *:not(.safe)');
    x.hide();   
}
trimmer('section');

Fiddle

Answer 1

var element = 'section';

//finds all non `.safe` elements in `section`s and hides them
$(':not(.safe)', element).hide();  

//finds all `.safe` elements in `section`s and shows the `section`s
$('.safe', element).parents(element).show();  

Answer 2

Horen was right, it is indeed impossible to show parts of a hidden element.

To make only parts of the text disappear, the non- safe content must be labeled for removal.

$(element).contents().each(function() {
  if (this.nodeType == 3)
    $(this).wrap('<span class="disappear" />');
});

You can read more about this answer here: How to add spans to all areas of a node that isn't restricted