Q:

find child table selector from parent table - jQuery

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

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>

A:

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

A:

Try replacing your remove code with this:
$(document).on("click", "#newlyAddedTable", function(){
    $(this).remove();
});

The code above registers a click listener on the document. The second parameter filters those events for those with the target #newlyAddedTable. This way you don't have to register a new click handler every time you insert a row (as in @VimalanJayaGanesh's solution).
P.S. If you are adding HTML that looks like this:
<tr>
  <td>
    <table id="newlyAddedTable">
    </table>
  </td>
</tr>

Then you are probably actually wanting to remove the parent tr (not the table with the id). There are two ways to fix this.

You can change the selector that filters click events and so have the tr handle the click rather than the table element in my example code:

$(document).on("click", "tr:has(#newlyAddedTable)", function(){

You can leave the selector as is but grab the parent tr from the table and remove that changing the remove line above to:

$(this).parents("tr").first().remove()
or
$(this).parent().parent().remove()

A:

As I don't have your complete code / fiddler, here is a possible solution.
Are you looking for something like this?

$('#add').on('click', function()
  {
     var newRow = '<tr CLASS="newrow"><td colspan="3"><table><tr><td>Test</td><td>User</td><td>test@example.com</td></table></td></tr>'
     $('#myTableBody').append(newRow); 
  Remove()
  });

function Remove()
{
 $('.newrow').off('click').on('click', function()
    {  
        $(this).remove();
    });
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="myTable" class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody id="myTableBody">
      <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>
<button type='button' id='add'>Add</button>

Note:
The following line indicates that,
$('.newrow').off('click').on('click', function()

the click event will be binded to the new row only once.
The reason for adding 'off('click') is, when you are dynamically adding rows (with common class 'newrow') to the table, the events will be binded several times. To avoid that, remove the previously binded click event and add a new one.

