I would like to hide certain text after a tag.

My HTML is:

<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

jQuery:

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');

The jQuery above only removes the text from the first element and not both.

How can I modify it so that it removed the text from both elements.

Fiddle

I would like to hide certain text after a tag.

My HTML is:

<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

jQuery:

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');

The jQuery above only removes the text from the first element and not both.

How can I modify it so that it removed the text from both elements.

Fiddle

• javascript
• jquery
• css

• On a related note, you close your span with a style tag: <span style="display:none"></style> – j08691 Commented May 11, 2016 at 14:12

9 Answers 9

Just consider looping through your elements and hiding the next sibling for each <strong> element via the each() function :

// Loop through each strong element
$('.listing_detail strong').each(function(){
  // Find it's next sibling and wrap it
  $(this.nextSibling).wrap('<span style="display:none"></style>');
});

Example

$('.listing_detail strong').each(function(){
  $(this.nextSibling).wrap('<span style="display:none"></style>');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

Why don't you use a .each() and hide 'em one by one?

$('.listing_detail strong').each( function(){
  $($(this)[0].nextSibling).wrap('<span style="display:none"></style>');
});

why not simply

$('.listing_detail strong').hide();

?

also add this to remove text from second element:

$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');

so it will be:

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
 $($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');

Try this:

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');

I think the problem was the [0] selector on $('.listing_detail strong'). Use a traversal method like 'forEach' instead. https://jsfiddle/d4gyv6ed/12/

$('.listing_detail strong').each(function(index){
    $(this).siblings().wrap('<span style="display:none"></style>');
});

It would be best to not get all tricky with indexing if you do not have to. Update your markup like this:

<div class="listing_detail col-md-4"><strong>Living Room:</strong> 
    <div class="hide-this-tag">Yes</div>
</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> 
    <div class="hide-this-tag">No</div>
</div>

Then do this with jQuery:

$(".hide-this-tag').hide();

Or just simply use css:

.hide-this-tag {
   display:none;
}

If all you were looking for are text nodes within a particular tag, this is the approach that works best, irrespective of the positioning of the text node within the tag.

Try using .contents() and .filter() methods and this.nodeType == 3 like so:

$('.listing_detail').contents().filter(function() {
    return this.nodeType == 3;
})
.wrap('<span style="display:none;"/>');

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

Whats I'd do is create a CSS class which has hidden properties and add them to the containers with your jQuery.

This gives you the freedom of adding and removing classes in the future with ease.

This should help you do exactly that

https://api.jquery./addclass/

And to apply it for multiple divs use each function in jquery

https://api.jquery./each/