CODEWITHSUNDEEP
javascriptjqueryhtml
user3105439
user3105439

Reputation: 75

Jquery - How to hide h2 before table and text after table?

I am working on my website and I don't know how to hide h2 tag before table and text after table. Can you help me ? Thank you very much for help.

HTML:

<h2>
  <a class="h2 dark" href="/be/ae/3_controls-training.html" name="3">Controls Training</a>
</h2>
<table class="training" cellspacing="0" width="100%" style="display: none;">
 <tbody>
   <tr>
     <th style="text-align: left;">Training</th>
     <th style="text-align: left;">Start</th>
     <th style="text-align: left;">End</th>
     <th style="text-align: left;">Location</th>
     <th style="text-align: right;">Price*</th>
     <th> </th>
   </tr>
 </tbody>
</table>
)* EUR excl. BTW

JQuery:

<script type="text/javascript">
$(document).ready(function() {
    // this is code for hiding my table if td is not inside
    $('.training').each(function(){
       if ($(this).find('td').length == 0){
        $(this).closest('h2').hide(); // I try to hide h2 before table without success
        $(this).hide(); // this works fine
        // I don't know how to hide text after table
       }
    });
});
</script>

Upvotes: 0

Views: 719

Answers (3)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

It is easy if you can wrap that #text with a span or a div. Then you can use .prev and .next to select the elements before and after the table.

In case, If you don't have access to the markup.. then the only way is to get the contents and look for the text and delete it..

See below demo.. It is going to display nothing.. since the output of your OP is to remove/hide everything. :)

Note: The below code removes the next text node after the table.. so test it properly and change it as required.

$('.training').each(function() {
  $(this).prev('h2').remove(); //remove or hide h2
  var tableSiblings = $(this).parent().contents();
  var deleteNext = false;
  $.each(tableSiblings, function(i, content) {
    if (deleteNext) {
      $(this).remove();
      deleteNext = false;
    }
    if ($(this).hasClass('training')) {
      deleteNext = true;
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>
  <a class="h2 dark" href="/be/ae/3_controls-training.html" name="3">Controls Training</a>
</h2>
<table class="training" cellspacing="0" width="100%" style="display: none;">
  <tbody>
    <tr>
      <th style="text-align: left;">Training</th>
      <th style="text-align: left;">Start</th>
      <th style="text-align: left;">End</th>
      <th style="text-align: left;">Location</th>
      <th style="text-align: right;">Price*</th>
      <th></th>
    </tr>
  </tbody>
</table>
)* EUR excl. BTW

Upvotes: 2

vernak2539
vernak2539

Reputation: 596

try this

$('.training').closest( 'h2' ).hide(); // will hide closest h2 tag, but could be after
$('.training').next().hide(); // will hide element directly after .training

You should try adding classes specific to what you're trying to do, instead of relying on dom elements

Upvotes: 0

Tim
Tim

Reputation: 326

To get the previous element in the DOM you can use jQuery .prev() http://api.jquery.com/prev/

$(this).prev().hide();

You can't select the text as it is not a DOM element. Wrap it in p tags and then you can use .next() http://api.jquery.com/next/

$(this).next().hide();

Example: http://jsfiddle.net/sfctbnkz/

Upvotes: 4

Related Questions