Trova il selettore della tabella figlio dalla tabella padre - jQuery

Question

Ho una struttura di tabella come questa. Abbastanza semplice.

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

In fase di esecuzione sto vincolante una nuova riga a questa tabella per un particolare rowclick. Questa nuova riga contiene una nuova tabella.

Ora, facendo nuovamente clic sulla riga, desidero essere in grado di rimuovere lo row(the new table) appena aggiunto.

Sto usando bootstrap table.

Ecco cosa ho provato finora.

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

Voglio essere in grado di rimuovere la tabella appena aggiunta sulla riga è stata creata.

Proprio maggiori spiegazioni sulla base delle risposte di seguito:

<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

Aggiornamento: dal commento dell'OP di seguito sembra che il modo migliore per implementare la nuova tabella sia utilizzare un selettore di classe e non un selettore di ID. Il codice sottostante è stato aggiornato di conseguenza. *** Dove prima c'era un ID per newTable c'è una classe --->#newTable ===>.newTable:

Basta cambiare:

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

A:

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

Answer 2

provare a sostituire il codice di rimuovere con questo:

$(document).on("click", "#newlyAddedTable", function(){ 
    $(this).remove(); 
}); 

Il codice precedente registra un clic ascoltatore sul document. Il secondo parametro filtra tali eventi per quelli con l'obiettivo #newlyAddedTable. In questo modo non devi registrare un nuovo gestore di clic ogni volta che inserisci una riga (come nella soluzione di @ VimalanJayaGanesh).

P.S. Se si aggiunge HTML che assomiglia a questo:

<tr> 
    <td> 
    <table id="newlyAddedTable"> 
    </table> 
    </td> 
</tr> 

probabilmente stai in realtà voler rimuovere il genitore tr (non la tabella con il id). Ci sono due modi per risolvere questo problema.

1. È possibile modificare il selettore che filtri eventi click e così hanno l'tr gestire il clic, piuttosto che l'elemento table nel mio codice di esempio:

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

2. Puoi lasciare il selettore come è ma afferrare il genitore tr dalla tabella e rimuovere quella modificando la riga di rimozione sopra a:

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

o

$(this).parent().parent().remove()

Answer 3

Come io non ho il tuo codice completo/violinista, ecco una possibile soluzione.

Stai cercando qualcosa di simile?

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

Nota:

La riga seguente indica che,

$('.newrow').off('click').on('click', function() 

l'evento click sarà binded alla nuova riga solo una volta.

Il motivo dell'aggiunta di "off" ("clic") è, quando si aggiungono dinamicamente le righe (con la classe comune "newrow") alla tabella, gli eventi verranno associati più volte. Per evitare ciò, rimuovere l'evento click precedentemente associato e aggiungerne uno nuovo.