Jquery + php, remove dynamic rows from table td click

Question

Hi guys, I'm trying to remove a row from a table when I click a specific row column. I'm using .live() so that I can remove rows added from a ajax request. It works fine, my problem is, the table comes from php with two rows, I can then insert new ones and remove them, but when I remove one of the rows that came with php, it remove all rows from the table.

PHP:

<table id="listaEquipamentos">
<?php 
    if($this->listaEquipamentos){
     foreach ($this->listaEquipamentos as $equipamento) { 
      $UF = trim($equipamento['siglaUF']);?>
     <tr>
      <td><?php echo $equipamento['siglaUF'];?></td>
      <td><?php echo $equipamento['siglaLocalidade'];?></td>
      <td><?php echo $equipamento['siglaEstacao']?></td>
      <td><?php echo $equipamento['nomeEquipamento'];?></td>
      <td><?php echo $something; ?></td>
      <td align="center">
       <?php echo "<input class='bot1' type='button' value='X'> " ?>
      </td>
     </tr>
     <?php } ?>
    </table>

JavaScript:

$('#listaEquipamentos tr > td:nth-child(6)').live("click", function(){
 if(confirm("Do you want to remove this row?")){
  $(this).parent('tr').remove();
 }
});

$("#btnAddEquipamento").click(function(){
 var ok = 1;
 if($("#slcUF").val() == 0){
  alert("UF em Branco");
  ok = 0;
 } else if($("#slcLocalidade").val() == 0){
  alert("Localidade em Branco");
  ok = 0;
 } else if($("#slcEstacao").val() == 0){
  alert("Estacao em Branco");
  ok = 0;
 } else if($("#txtEquipamento").val() == ""){
  alert("Equipamento em Branco");
  ok = 0;
 } else if($("#slcEquipamento").val() == "0"){
  alert("Equipamentoo em Branco");
  ok = 0;
 }
 if(ok){
  if($("#slcAbrangencia").val() != ""){
   var toadd = $('#slcEquipamento option:selected').text();
   var existe = 0;

   $("#divListaEquipamento tr>td:nth-child(4)").each(function(index){
    if( $(this).text() == toadd)
     existe = 1;
        });

   if(existe != 1){

    var uf = $('#slcUF option:selected').text();
    var loc = $('#slcLocalidade option:selected').text();
    var est = $('#slcEstacao option:selected').text();
    if($("#slcEquipamento").val() > 0){
     $("#hdnEquipamento").val($("#slcEquipamento").val()+"||"+$('#slcEquipamento option:selected').text());
    }else{
     var equip = $('#txtEquipamento').val().substr(0,15);
     $("#hdnEquipamento").val(equip);
    }
    var tempLoc = loc.split("-");
    var tempEst = est.split("-");
    $("#hdnUF").val(uf.substr(0,2));
    $("#hdnLocalidade").val(tempLoc[0]);
    $("#hdnEstacao").val(tempEst[0]);
    $.post("/aplicacao/jm/index.php/janela/addequipamento", $("#frmNovaJanela").serialize(),
         function(data){
        if(data[0] != null){
         $(".tabResultado1 > tbody>tr:last").prev().append("<tr><td>"+data[1]+"</td><td>"+data[3]+"</td><td>"+data[5]+"</td><td>"+data[7]+"</td><td>"+data[8]+"</td><td><input class='bot1' type='button' value='X'></td></tr>");
         var total = parseInt($("#divListaEquipamento tr:last > td:nth-child(5)").text()) + parseInt(data[8]);
         $("#divListaEquipamento tr:last > td:nth-child(5)").text(total);
        }else alert("Problema ao gravar equipamento.")
        }, "json");    
   }else{
    alert('O Equipamento '+toadd+' já está na lista.');
   }
  }else{
   alert ("Favor Selecionar a Abrangencia.");
  }
 }
});

I'v already tried:

$(this).parent('tr').remove();
$(this).parents('tr').remove();
$(this).parent().parent().remove();
$(this).closest('tr').remove();

Answer 1

Try changing this:

  $(this).parent('tr').remove(); ;

To:

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

Answer 2

Have you seen Datatables? Since I've switched over to it table manipulation is so much easier and it gives me more functionality than I'd ever care to program. The specific page I've given you an example for is for dynamic row selection (across paging, if you have it enabled) and deleting the selected rows.

Using Datatables, I approach this solution by pulling the data in (via AJAX) manipulating into a table with Datatables, doing the selection as documented in the link, then the delete is a matter of not only removing the element as shown, but also sending an Ajax call back to the server to delete in the table. Datatables allows me to do this through a built-in data handler that will pass $_REQUEST variables to the page building the query that I can in turn use to do the delete.

Answer 3

I was probably doing something stupid! I'v changed some things, and now it works!

$('#listaEquipamentos tr > td:nth-child(6)').live("click", function(){
    if(confirm("Deseja remover esta linha?")){
        $(this).parent('tr').remove(); ;
    }
});

$("#btnAddEquipamento").click(function(){
    var ok = 1;
    if($("#slcUF").val() == 0){
        alert("UF em Branco");
        ok = 0;
    } else if($("#slcLocalidade").val() == 0){
        alert("Localidade em Branco");
        ok = 0;
    } else if($("#slcEstacao").val() == 0){
        alert("Estacao em Branco");
        ok = 0;
    } else if($("#txtEquipamento").val() == ""){
        alert("Equipamento em Branco");
        ok = 0;
    } else if($("#slcEquipamento").val() == "0"){
        alert("Equipamentoo em Branco");
        ok = 0;
    }
    if(ok){
        if($("#slcAbrangencia").val() != ""){
            var toadd = $('#slcEquipamento option:selected').text();
            var existe = 0;

            $("#divListaEquipamento tr>td:nth-child(4)").each(function(index){
                if( $(this).text() == toadd)
                    existe = 1;
              });

            if(existe != 1){

                var uf = $('#slcUF option:selected').text();
                var loc = $('#slcLocalidade option:selected').text();
                var est = $('#slcEstacao option:selected').text();
                if($("#slcEquipamento").val() > 0){
                    $("#hdnEquipamento").val($("#slcEquipamento").val()+"||"+$('#slcEquipamento option:selected').text());
                }else{
                    var equip = $('#txtEquipamento').val().substr(0,15);
                    $("#hdnEquipamento").val(equip);
                }
                var tempLoc = loc.split("-");
                var tempEst = est.split("-");
                $("#hdnUF").val(uf.substr(0,2));
                $("#hdnLocalidade").val(tempLoc[0]);
                $("#hdnEstacao").val(tempEst[0]);
                $.post("/aplicacao/jm/index.php/janela/addequipamento", $("#frmNovaJanela").serialize(),
                           function(data){
                                if(data[0] != null){
                                    $("#listaEquipamentos > tbody:last").append("<tr><td>"+data[1]+"</td><td>"+data[3]+"</td><td>"+data[5]+"</td><td>"+data[7]+"</td><td>"+data[8]+"</td><td><input class='bot1' type='button' value='X'></td></tr>");
                                    var total = parseInt($("#totalCliente").val()) + parseInt(data[8]);
                                    $("#totalCliente").val(total);
                                }else alert("Problema ao gravar equipamento.")
                             }, "json");                
            }else{
                alert('O Equipamento '+toadd+' já está na lista.');
            }
        }else{
            alert ("Favor Selecionar a Abrangencia.");
        }
    }