使用jQuery隐藏div中的内联文本

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> 

Answer 1

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).

Answer 2

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> 

Answer 3

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> 

Answer 4

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
});

Answer 5

Using Childern should work

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

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

JS Fiddle

Answer 6

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> 

Answer 7

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?

Answer 8

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>