如何使用jquery清空最近的表

how to empty nearest table using jquery?

本文关键字：最近 清空 何使用 jquery      更新时间：2023-09-26

这是我的代码。当我点击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>

基于HTML标记，您可以使用：

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

试试这个。。

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

试试这个，它会对你有所帮助。

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

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

试试这个。

@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();
    });
})
相关文章：