从父表中查找子表选择器 - jQuery

Question

我有这样的表结构.相当简单.

  <table id="myTable" class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

在运行时,我将一个新行绑定到此表以获取特定内容rowclick.这个新行包含一个新表.

现在再次单击该行,我希望能够删除新添加的行row(the new table).

我在用bootstrap table.

这是我到目前为止所尝试的.

$('#myTable').on('click-row.bs.table', function (e, row, $element) {
    //if ($element.has('#newlyAddedTable').length) { ....// did not work

    if ($('#myTable').has('#newlyAddedTable').length) {  // this removes the table on any row click. Not what I intend to do
    {
        $("#newlyAddedTable").remove();
    } else {
        // some operation...
    }
}

我希望能够删除它创建的行上新添加的表.

基于以下答案的更多解释:

<tr> ----------> if i click this
  <td>
    <table id="newlyAddedTable"> ---------> this is added
    </table>
  </td>
</tr>

<tr> ----------> if i again click this or maybe any other row in the table
  <td>
    <table id="newlyAddedTable"> ---------> this is removed
    </table>
  </td>
</tr>

Answer 1

更新:从下面的OP评论看来,实现新表的最佳方式是使用类选择器而不是id选择器.以下代码已相应更新.***之前有一个id newTable有一个类---> #newTable===> .newTable:

只是改变:

$('#myTable').has('#newlyAddedTable').length

至:

$('.newlyAddedTable', $element).length  //element === clicked row -- see demo

vvvvv DEMO vvvvv

$('#myTable').bootstrapTable().on('click-row.bs.table', function(e, row, $element) {
    if( $('.newTable', $element).length ) {
        $('.newTable', $element).remove();
    } else {
        $('td:first', $element)
        .append( '<table class="newTable"><tr><td>NEW TABLE</td></tr></table>' );
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css" rel="stylesheet"/>
<table id="myTable" class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>