Selecting content with no element wrapped around

Question

In below code, I want to hide the "Lorem Ipsum is a dummy content" by showing the other elements inside the parent container, either by using jquery, javascript or CSS? Solution much appreciated.

 <div class="someWrapper">
     Lorem Ipsum is a dummy content
      <div class="anotherContainer">
          <p>Text goes here</p>
      </div>
 </div>

What do you mean by "hide it by showing the other elements," do you mean cover it up? — Cup of Java, Jan 25 '16 at 20:28
Do the contents of `anotherContainer` need to be transferred to `.someWrapper` or hide the contents of `.someWrapper` with `.anotherContainer`? — Will Thresher, Jan 25 '16 at 20:29

score 7 · Accepted Answer · edited Jan 25 '16 at 20:40

7

To do that you need to target the textNode of the .someWrapper element and remove them from the DOM. To do that you can use filter() and remove(). Try this:

$('.someWrapper').contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE; // 3
}).remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someWrapper">
  Lorem Ipsum is a dummy content
  <div class="anotherContainer">
    <p>Text goes here</p>
  </div>
</div>

edited Jan 25 '16 at 20:40

Alessio Cantarella

5,077
3
27
34

answered Jan 25 '16 at 20:28

Rory McCrossan

331,213
40
305
339

Thanks Rory it worked fine for me :) – Nitesh Jan 25 '16 at 20:45

score 1 · Answer 2 · answered Jan 25 '16 at 20:37

1

You can do this with a one liner, either with plain JavaScript:

document.getElementsByClassName('someWrapper')[0].firstChild.remove();

jsFiddle example

or jQuery:

$($('.someWrapper').get(0).firstChild).remove();

jsFiddle example

answered Jan 25 '16 at 20:37

j08691

204,283
31
260
272

score 0 · Answer 3 · answered Jan 25 '16 at 20:33

0

You can select inner content, empty outer element and append inner ounce again:

$(document).ready(function(){
  $outer = $('.someWrapper');
  $inner = $('.anotherContainer');
  $outer.empty();
  $outer.html($inner);
});

here is fiddle: https://jsfiddle.net/woo3cgwx/

answered Jan 25 '16 at 20:33

Everettss

15,475
9
72
98

Your solution would work only in this particular case, i.e. it would not work if in `anotherContainer`, before `
Text goes here
` there were another text node without a wrapper. – Alessio Cantarella Jan 25 '16 at 20:46
@AlessioCantarella You are right. I want to show the most intuitive and easy way to do it. – Everettss Jan 25 '16 at 20:53

Selecting content with no element wrapped around

3 Answers3