Question

这是我的代码。当我点击click1时，我需要清空下一个div中的表。是否可以通过使用jquery使用最近的兄弟来清空该表。

我正在使用

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>

Answer 1

根据您的HTML标记，您可以使用：

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

Answer 2

尝试这个..

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

Answer 3

试试这会对你有帮助。

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

上述功能的HTML是

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

Answer 4

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

试试这样。

Answer 5

@Felix提供了一个非常好的解决方案。但是，我建议你不要在任何地方使用这种方法。它可能会给你意想不到的结果。更好的方法是设置一些数据属性，而不是使用它们来删除关联的表。通过这种方式，您可以完全控制哪些表被清空。

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

如何使用jquery清空最近的表？

5 个答案: