Why does removing javascript not work?

Asked

Viewed 79 times

0

I made a javascript function to delete table row when the user presses the 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>
<div class="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

  • what is the error? this snippet code is not missing the html? , in addition, in the row where the td with the button, has many double quotes that are probably giving error, from a look at these points

  • You’re not accusing mistakes here

  • Edit your question include html so we can simulate your problem.

  • Look there, I edited there

2 answers

1


I changed your code so that the <button> dynamically created will call a function by passing this (the button itself) as parameter.

onClick="RemoveLinha(this);"

And I created the function below to remove the nearest line using the method Closest() jquery:

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

Below is an example:

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>
<table class="table table-bordered">
  
</table>

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

1

In your original question was like this:

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

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

'... 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>
<table class="table-bordered">
</table>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.