Hide inline text in div using jQuery

Question

How can I hide the inline text within the div of class .test without hiding the h1 element? This is a simplified example of a problem I'm having in a larger web application.

Some other guidelines are that I can't wrap the text in a span tag and I want to keep all of the content in the div so I can't simply erase and add back everything I want.

$(document).ready(function() {});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
</div>

@Naren Murali I can't wrap it in a span because this html is being given to me. I could write a script to wrap all inline text in span tags but I'm trying not to add other parts to this. — Chris Bell, Sep 27 '17 at 18:50

score 3 · Answer 1 · edited Oct 01 '17 at 18:06

3

You need to wrap text in another element, for example span.

<div class="test">
  <h1>Hello World</h1>
  <span class="my-text">"This is text"</span>
</div>

And your js:

$(document).ready(function() {
  $('.my-text').hide();
});

If fore some reason you are not able to wrap the text (as you mentioned in the comments), you can use another simple solution:

<div class="test">
  <h1>Hello World</h1>
  This is text
</div>

And js:

$(document).ready(function() {
  var h1elem = $('h1'); //cache element which should not be removed
  $('.test').empty();  //clear container .test
  $('.test').append(h1elem); // append cached element back
});

Here is the plunker for you. (2 seconds timeout added for better visualising).

edited Oct 01 '17 at 18:06

Shiladitya

12,003
15
25
38

answered Sep 27 '17 at 18:50

Artem Arkhipov

7,025
5
30
52

What if I'm not able to wrap the text in a span tag. This html is being generated using swagger's codegen tools and I'm adding some functionality to it. – Chris Bell Sep 27 '17 at 18:51
I've edited my answer with additional solution and plunker. – Artem Arkhipov Sep 27 '17 at 18:58

WizardCoder · Answer 2 · 2017-09-27T19:04:52.373

0

If you can't add an element around the "This is text" string, then you can store the H1 element in a variable and then replace the .text HTML with the stored H1 element.

$(document).ready(function() {
  var h1 = $('.test').find('h1');
  $('.test').html(h1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
</div>

EDIT

Seeing as you want to keep other unknown content in the DIV then you oculd do this.

$(document).ready(function() {
  var h1 = $('.test').find('*');
  $('.test').html(h1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
  <h2>blah blah blah</h2>
  <p>Random content</p>
  <ul>
   <li>list</li>
   <li>list</li>
  </ul>
</div>

edited Sep 27 '17 at 19:04

answered Sep 27 '17 at 18:52

WizardCoder

3,353
9
20

I should also add that I don't want to lose any of the content in the div. – Chris Bell Sep 27 '17 at 18:54
@ChrisBell Woops sorry – WizardCoder Sep 27 '17 at 18:55
No worries. I didn't specify that originally. I've updated it now. – Chris Bell Sep 27 '17 at 18:56
@ChrisBell I can't see a way of doing this without knowing what other content is going to be in the div. Do you just want to hide any content that isn't wrapped in a HTML element? – WizardCoder Sep 27 '17 at 18:58
What I need is a way to hide inline text without modify the html and without losing that inline text. – Chris Bell Sep 27 '17 at 19:03
It may not be possible so I may be forced to write a script that adds tags around all inline text. – Chris Bell Sep 27 '17 at 19:03
@ChrisBell Yeah I think that may be your best option. It is hard to tell without seeing the whole picture. – WizardCoder Sep 27 '17 at 19:06
Yeah unfortunately I can't share the actual html and javascript online. – Chris Bell Sep 27 '17 at 19:07

Farhad Bagherlo · Answer 3 · 2017-09-27T19:17:01.883

hidden with JQuery

var Elem= $(".test h1");
$(".test h1").remove();
var Text=$(".test").text();
$(".test").empty().html(Elem).append($("<span/>",{text:Text,style:"display:none"}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
</div>

hidden with CSS

.test{font-size:0; }
.test h1{font-size:35px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
</div>

score 0 · Answer 4 · answered Sep 27 '17 at 18:55

0

Actually you can not say I want to hind entire div but not a single or 2 tags inside it. So you have to hide or show all of the inside that area

so if you want to show h1 but hide span then you can do this way

$(document).ready(function() {
    $('.test').find('h1').style('display', 'block');
    $('.test').find('span').style('display', 'none');
    // add all the tags you want to operate
});

answered Sep 27 '17 at 18:55

Aniruddha Das

20,520
23
96
132

$("mydiv").children().not("keepthis").hide() does exactly that. – Chris Bell Sep 27 '17 at 18:57
you can choose between `.hide()` or using `.style('display', 'block')`. not sure about the selector you are talking – Aniruddha Das Sep 27 '17 at 18:58

score 0 · Answer 5 · answered Sep 27 '17 at 18:59

0

Using Childern should work

var child = $('.test').children();
 $('.test').html(child);

//OR
$('.test').html($('.test').children());

JS Fiddle

answered Sep 27 '17 at 18:59

Rex

521
3
8

score 0 · Answer 6 · answered Sep 27 '17 at 19:06

You can use the below function to wrap the text in a span and then perform the show hide functionality.

$(document).ready(function() {
  //the below line fetches only the plain text inside the element
  var text = $('.test').clone().children().remove().end().text();
  //the below line fetches the html inside the element
  var html = $('.test').clone().children();
  //append the html and the text with a span wrapped around it
  $('.test').html(html).append('<span>' + text + '</span>');
  //you can then add any CSS you want to show hide the contents!
  $('button').on("click", function() {
    $('.test > span').css("display", "inline");
  });
});

.test>span {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
</div>
<button>show</button>

score 0 · Answer 7 · answered Sep 27 '17 at 19:08

You can't hide the text without wrapping in another element.

wrap it in the span and after that, you can play with that span

<div class='test'>
  <h1>Hello World</h1>
  <span id='test-span-id'>This is Text</span>
  <span class='test-span-class'>This is Text</span>
</div>

Here is your JS file

$(document).ready(function(){
    $('.test-span-class').hide();
    $('#test-span-id').hide();
});

I would suggest to use ID Selector instead of class Selector for better performance.

you can go through to link, why I have suggested to use ID Selector.

In jQuery, is selecting by class or id faster than selecting by some other attribute?

score 0 · Answer 8 · answered Sep 27 '17 at 19:29

You don't need to wrap it in HTML. This should work.

$(document).ready(function() {
$('.test')
  .contents()
  .filter(function() {
  return this.nodeType === 3;
}).wrap( '<div class="hidden"></div>' );
  
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <h1>Hello World</h1>
  "This is text"
</div>

Hide inline text in div using jQuery

8 Answers8