Question

我在每个表格上方都有一个h1标题，我想删除日期与上方td.tablecells中的日期不匹配的所有h1.heading。在第一个示例中，将删除不包含6月19日星期六的td。

我在下面使用它，但是它删除了所有td.table-cell，我需要一些额外的东西来保持td与匹配日期。我之所以努力，是因为H1坐在桌子外面，我似乎可以进入决赛。

$(".date-span").filter(function() {
  return $(this).text() !== $(".heading").text();
}).closest('.table-cell').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 18 Jun</span></td>
    <td class="tablecell"><span class="date-span">Sat 19 Jun</span></td>
  </tr>
</table>

<h1 class="heading">Fri 19 Aug</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 19 Aug</span></td>
    <td class="tablecell"><span class="date-span">Sat 20 Aug</span></td>
  </tr>
</table>

Answer 1

在测试条件下，使用DOM关系获取.prev()的同级对象，即父table的 heading

然后，使用正确的选择器，即使用'.tablecell'代替'.table-cell'

$(".date-span").filter(function() {
  return $(this).text().trim() !== $(this).closest('table').prev(".heading").text().trim();
}).closest('.tablecell').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Fri 18 Jun</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 18 Jun</span></td>
    <td class="tablecell"><span class="date-span">Sat 19 Jun</span></td>
  </tr>
</table>

<h1 class="heading">Fri 19 Aug</h1>
<table>
  <tr class="tablerow">
    <td class="tablecell"><span class="date-span">Fri 19 Aug</span></td>
    <td class="tablecell"><span class="date-span">Sat 20 Aug</span></td>
  </tr>
</table>

根据注释更新的HTML，您最多可以遍历.closest('.timetable-outer')，然后使用.prev()

$(".date-span").filter(function() {
  return $(this).text().trim() !== $(this).closest('.timetable-outer').prev(".heading").text().trim();
}).closest('.table-times').remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="heading">Wednesday 18 July</h1>
<div class="timetable-outer">
  <div class="production">
    <div class="title">A title</div>
    <table class="timetable-inner">
      <tbody>
        <tr class="table-row">
          <td class="table-times"> <span class="date-span">Wednesday 18 July</span> </td>
          <td class="table-times"> <span class="date-span">Thursday July 19</span> </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 2

这是工作示例：https://codepen.io/creativedev/pen/XBKoYN

$(".date-span").filter(function() {
return $(this).text().trim() != $(this).parents('table:first').prev(".heading").text().trim();
}).closest('.tablecell').remove();

用jQuery删除不匹配的元素

2 个答案: