CODEWITHSUNDEEP
javascriptjquery
Dileep Kumar
Dileep Kumar

Reputation: 347

how to empty nearest table using jquery?

This is my code. When I click on click1 I need to empty the table that is in next div. is it possible to empty that table by using closest siblings using jquery.

i am using 

obj = $(this);
obj.siblings('table').empty();


 <div>
    <div class="dropdown busBook">
              <a class="triggerBook listItemBook" data-toggle="dropdown" href="javascript:void(0)">Click here</a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                <li><a class="emptytable"   href="javascript:void(0)" >click1</a></li>
                <li><a class="emptytable" id="Tele"  href="javascript:void(0)">click2</a></li>
                <li><a class="emptytable" "  href="javascript:void(0)">click3</a></li>
              </ul>

              <form>
              <input type="hidden" value="<%= user.id %>" i name="user_id" title="Consulting"  />
              </form>
    </div>
</div>

<div class="row hide">

          <div class="col-md-12"> 

            <div class="bookhere">
              <div id="table-wrapper"><div id="table-scroll">  
              <a class="next pull-right" id='next_id' href="#">next</a>
              <input type="hidden" value="<%= user.id %>" name="user_id" />
              <div class="clearfix"></div>
              <input type="hidden" value="<%= Date.today + 7.days %>"  name="next" />
              <table class="table table-bordered table-condensed" id='table_id'>
                  <tr>
                    <% (Date.today..Date.today + 8.days).first(7).each do |display| %>
                      <th><%= display.strftime("%a") %>(<%= display.strftime("%d/%m") %>)</th>
                    <% end %>
                  </tr>
                 <tr><td>Date here</td></tr>
              </table>
         </div>
    </div>

Upvotes: 3

Views: 183

Answers (5)

Shiva Avula
Shiva Avula

Reputation: 1836

@Felix gave a very good solution. But, I would suggest you not to use this approach anywhere. It might give you unexpected results. Better way is to set some data properties and than use them to delete the associated tables. This way you will have total control over what table gets emptied.

HTML

<a class="emptytable" id="Tele" data-table="#table-1">Empty table 1</a>
<a class="emptytable" id="Tele" data-table="#table-2">Empty table 2</a>
...

<table id="table-1">...</table>
<table id="table-2">...</table>
...

Javascript

$(function(){
    $('.emptytable').click(function(){
        $($(this).data('table')).empty();
    });
})

Upvotes: 0

Dileep Kumar
Dileep Kumar

Reputation: 347

$('a').closest('.div_class_name').siblings('table').empty();

Try like this.

Upvotes: 0

Arif
Arif

Reputation: 1

Try this it will help you.

     $(function() {
       $('#myDiv1').next('div').children().html('');    
  });

HTML for this above function is

<div id="myDiv1">
  <table>
     <tr>
       <td>1</td><td>Sample Data</td>
            </tr>   
            <tr>
                <td>2</td><td>Sample Data</td>
            </tr>
            <tr>
                <td>3</td><td>Sample Data</td>
            </tr>
            <tr>
                <td>4</td><td>Sample Data</td>
            </tr>   
        </table>
    </div>

    <div id="myDiv2">
        <table>
            <tr>
                <td>1</td><td>Sample Data</td>
            </tr>   
            <tr>
                <td>2</td><td>Sample Data</td>
            </tr>
            <tr>
                <td>3</td><td>Sample Data</td>
            </tr>
            <tr>
                <td>4</td><td>Sample Data</td>
            </tr>   
        </table>
    </div>

Upvotes: 0

chriz
chriz

Reputation: 1345

try this one.. 

$(".emptytable" ).click(function() {
      $(.dropdown).parent().next().find('table').empty();
    });

Upvotes: 0

Felix
Felix

Reputation: 38112

Based on your HTML markup, you can use:

$('a.emptytable').closest('div.dropdown').parent().next().find('table').empty();

Upvotes: 1

Related Questions