Why remove javascript function does not work?

Question

Why remove javascript function does not work?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (-3 votes)

0

I made a javascript function to delete table row when user presses button, but it is not working.

(function($) {

RemoveTableRow = function(handler) {
var tr = $(handler).closest('tr');

tr.fadeOut(400, function(){ 
  tr.remove(); 
}); 

return false;
  };	

var counter = 1;
jQuery('a.add').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr>'+
                            '<td><input class="form-control" name="cod_Produto" type="text" disabled/></td>'+
                            '<td>Update software</td>'+
                            '<td>wd</td>'+
                            '<td>wd</td>'+
                            '<td>efe</td>'+
                            '<td>ewf</td>'+
                            '<td>wefwe</td>'+
                            '<td>wef</td>'+
                            '<td>ewfe</td>'+
                            '<td><button class="btn btn-danger" type="button" onClick="newRow.remove()"><i class="fa fa-remove"></i></button></td>'+
                        '</tr>');
    jQuery('table.table-bordered').append(newRow);
});

})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><divclass="col-lg-12">
                <div class="box box-success">
                    <div class="box-header">
                        <div class="col-lg-11">Itens</div>
                        <div class="col-lg-1"><a href="#" title="" class="add"><buttom class="btn btn-success"><i class="fa fa-plus"></i></buttom></a></div>
                    </div>
                    <div class="box-body">
                        
                        <table class="table table-bordered">
                            
                            <tr>
                              <th style="width: 80px">Cód</th>
                              <th>Produto</th>
                              <th>UN</th>
                              <th style="width: 40px">Volume</th>
                              <th>Peso</th>
                              <th>Unitário</th>
                              <th>Total</th>
                              <th>Desconto</th>
                              <th>Líquido</th>
                              <th>Excluir</th>
                            </tr>
                            
                            <tr>
                                <td><input class="form-control" name="cod_Produto" type="text" disabled/></td>
                                <td>Update software</td>
                                <td>wd</td>
                                <td>wd</td>
                                <td>efe</td>
                                <td>ewf</td>
                                <td>wefwe</td>
                                <td>wef</td>
                                <td>ewfe</td>
                                <td></td>
                            </tr>
                            

                          </table>
                        
                    </div>
                </div>
            </div>

javascript jquery

asked by anonymous 29.01.2018 / 19:25

3 answers

1

In your original question it was like this:

'... onClick="$(this).parents("tr").remove()" ....'+

All you had to do was to change the "tr" (double quotation marks) to 'tr' (single quotation marks, which is the delimiter of the string you are concatenating) and escape the quotation marks:

'... onClick="$(this).parents(\'tr\').remove()" ....'+

See example:

var newRow = jQuery('<tr>'+
'<td><input class="form-control" name="cod_Produto" type="text" disabled/></td>'+
'<td>Update software</td>'+
'<td>wd</td>'+
'<td>wd</td>'+
'<td>efe</td>'+
'<td>ewf</td>'+
'<td>wefwe</td>'+
'<td>wef</td>'+
'<td>ewfe</td>'+
'<td><button class="btn btn-danger" type="button" onClick="$(this).parents(\'tr\').remove()"><i class="fa fa-remove">Remover linha</i></button></td>'+
'</tr>');
jQuery('table.table-bordered').append(newRow);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table-bordered">
</table>

29.01.2018 / 21:22

-3

onClick="newRow.remove()"

If it is we, hugs.

29.01.2018 / 19:38

Error Entity Framework WPF Client Fit image inside button

score 1 · Accepted Answer

Changed your code so that dynamically created% will call a function passing this (the button itself) as a parameter.

onClick="RemoveLinha(this);"

And I created the function below to remove the nearest row using the closest () method of jquery:

function RemoveLinha(btn){
   $(btn).closest("tr").remove();
}

Follow the example below:

var counter = 1;

jQuery('a.add').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr>'+
      '<td><input class="form-control" name="cod_Produto" type="text" disabled/></td>'+
      '<td>Update software</td>'+
      '<td>wd</td>'+
      '<td>wd</td>'+
      '<td>efe</td>'+
      '<td>ewf</td>'+
      '<td>wefwe</td>'+
      '<td>wef</td>'+
      '<td>ewfe</td>'+
      '<td><button class="btn btn-danger" type="button" onClick="RemoveLinha(this);"><i class="fa fa-remove"></i> Remover</button></td>'+
      '</tr>');
      
    jQuery('table.table-bordered').append(newRow);
});

function RemoveLinha(btn){
   $(btn).closest("tr").remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><tableclass="table table-bordered">
  
</table>

<a class="add" href="#">Clique para adicionar</a>