user38208 user38208 - 6 months ago 31
Javascript Question

Hide Text after a tag using jQuery

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

Answer

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.com/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>