Удалить второй ближайший <tr>

Question

У меня есть следующая разметка: -

<tr>
<td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="ProjectETA">
<nobr>Project ETA</nobr>
    </span></td>
<td valign="top" width="350px" class="ms-formbody">
<span dir="none">
<table id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldTopTable" border="0" cellpadding="0" cellspacing="0"><tbody>


<tr><td class="ms-dtinput">
<label for="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" style="display:none">ProjectETA Date</label>
<input type="text" value="20/03/2020" maxlength="45" id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" title="Project ETA" class="ms-input" autopostback="0">
</td>
<td class="ms-dtinput"><a href="#" onclick="clickDatePicker('ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate', '\u002fsites\u002fSSC\u002f_layouts\u002f15\u002fiframe.aspx?cal=1&amp;lcid=2057&amp;langid=1033&amp;tz=03:59:59.9998631&amp;ww=0111110&amp;fdow=1&amp;fwoy=2&amp;hj=0&amp;swn=false&amp;minjday=109207&amp;maxjday=2666269&amp;date=', '20/03/2020', event); return false;"><img id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerImage" src="/_layouts/15/images/calendar_25.gif?rev=47" border="0" alt="Select a date from the calendar." data-themekey="#"></a></td><td><iframe id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=47" frameborder="0" scrolling="no" style="display:none; position:absolute; width:200px; z-index:101;" title="Select a date from the calendar."></iframe></td></tr></tbody></table></span>
</td>
</tr>

я написал следующее, чтобы удалить второй ближайший <tr> $("input[id^='ProjectETA_']").closest('tr').closest('tr').remove();, но это удалило ближайший tr, а не второй ближайший tr. любой совет?

Answer 1

.closest вернет текущий элемент , если он соответствует селектору:

console.log(inner.closest('div'));

<div id="outer">
  <div id="inner">
  </div>
</div>

Вам нужно перейти на один элемент вверх, чтобы иметь возможность снова вызвать .closest:

$("input[id^='ProjectETA_']").closest('tr').parent().closest('tr').remove()

$("input[id^='ProjectETA_']").closest('tr').parent().closest('tr').remove();
console.log($('table tr').length);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td nowrap="true" valign="top" width="113px" class="ms-formlabel"><span class="ms-h3 ms-standardheader" id="ProjectETA">
        <nobr>Project ETA</nobr>
      </span></td>
    <td valign="top" width="350px" class="ms-formbody">
      <span dir="none">
        <table id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldTopTable" border="0" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td class="ms-dtinput">
                <label for="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" style="display:none">ProjectETA Date</label>
                <input type="text" value="20/03/2020" maxlength="45" id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate" title="Project ETA" class="ms-input" autopostback="0">
              </td>
              <td class="ms-dtinput"><a href="#" onclick="clickDatePicker('ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDate', '\u002fsites\u002fSSC\u002f_layouts\u002f15\u002fiframe.aspx?cal=1&amp;lcid=2057&amp;langid=1033&amp;tz=03:59:59.9998631&amp;ww=0111110&amp;fdow=1&amp;fwoy=2&amp;hj=0&amp;swn=false&amp;minjday=109207&amp;maxjday=2666269&amp;date=', '20/03/2020', event); return false;"><img id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerImage" src="/_layouts/15/images/calendar_25.gif?rev=47" border="0" alt="Select a date from the calendar." data-themekey="#"></a></td>
              <td><iframe id="ProjectETA_dc965d26-95ca-480a-9a5c-f671f34e37ed_$DateTimeFieldDateDatePickerFrame" src="/_layouts/15/images/blank.gif?rev=47" frameborder="0" scrolling="no" style="display:none; position:absolute; width:200px; z-index:101;" title="Select a date from the calendar."></iframe></td>
            </tr>
          </tbody>
        </table>
      </span>
    </td>
  </tr>
</table>