find child table selector from parent table - jQuery

Question

I have a table structure like this. Fairly simple one.

  <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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

At runtime I am binding a new row to this table for a particular rowclick. This new row contains a new table.

Now on clicking the row again, I want to be able to remove the newly added row(the new table).

I am using bootstrap table.

Here is what I have tried so far.

$('#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...
    }
}

I want to be able to remove the newly added table on the row it was created.

Just more explanation based on the Answers below:

<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

Update: from OP's comment below it sounds like the best way to implement the new table is to use a class selector and not an id selector. The code below has been updated accordingly. ***Where previously there was an id for newTable there is a class ---> #newTable ===> .newTable:

Just change:

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

To:

$('.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>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>