Comment supprimer les lignes sélectionnées d'une table en utilisant jquery

Question

J'ai une table dans laquelle je peux ajouter des lignes dynamiquement. J'ai la case à cocher pour chaque rangée. Je veux supprimer les lignes qui sont sélectionnées.

Ma page html est comme suit

   <table class="table"> 
       <thead> 
       <tr> 
        <th></th> 
        <th>Loads</th> 
        <th>Quantity</th> 
        <th>Watts</th> 
        <th>Hours/day</th> 
        <th>Watt Hrs/day</th> 
       <tr> 
       </thead> 
        <tbody> 
       <tr> 
        <td><input type="checkbox"></td>       
        <td>Fans</td> 
        <td><input type="text" class="form-control"></td> 
        <td><input type="text" class="form-control"></td> 
        <td><input type="text" class="form-control"></td> 
        <td><span id="sum">0</span></td> 
       </tr> 
       <tr> 
        <td><input type="checkbox"></td>      
        <td>Tubelights</td> 
        <td><input type="text" class="form-control"></td> 
        <td><input type="text" class="form-control"></td> 
        <td><input type="text" class="form-control"></td> 
        <td><span id="sum">0</span></td> 
       </tr> 
       </tbody> 
      </table> 
      <form id="myform"> 
       <input type="text" id="name" placeholder="Name" required="true"/> 
       <button type="submit" class="add-row">Add Row</button> 
       <button id="remove" type="button">Reomve Selected</button> 
      </form> 

Mon script est la suivante

<script>ole="form" 
    $(document).ready(function(){ 
     $(".nav-tabs a").click(function(){ 
     $(this).tab('show'); 
     }); 
    }); 
    $(document).ready(function(){ 
     $(":text").each(function() { 
      $(this).keyup(function(){ 
       findTotals(); 
      }); 
     }); 
    }); 
    function findTotals() { 
     $("tbody tr").each(function() { 
      row_total = 1; 
      $("input:text",this).each(function() { 
       if(!isNaN(parseFloat($(this).val()))){ 
       row_total *= parseFloat($(this).val()); 
       } 
      }); 
      if(row_total == 1){ 
       row_total = 0; 
      } 
      $("#sum",this).html((row_total/24).toFixed(2)); 
     }); 
    } 
    $(document).ready(function(){ 
     $(".add-row").click(function(){ 
      var name = $("#name").val(); 
      if(name){ 
       var markup = "<tr><td><input type='checkbox'></td><td>"+ name +"</td><td><input type='text' class='form-control'></td><td><input type='text' class='form-control'></td><td><input type='text' class='form-control'></td><td><span id='sum'>0</span></td></tr>"; 
       $("table tbody").append(markup); 
      } 
      $('#myform').find('input:text').val(''); 
     }); 


    }); 
</script> 

peut me aider à le faire.

Answer 1

un coup d'oeil à ce
sur le bouton Supprimer vous cliquez dessus, vous avez juste besoin de faire

$("input[type=checkbox]:checked").closest("tr").remove();

$('#remove').click(function(){ 
 
\t \t $("input[type=checkbox]:checked").closest("tr").remove(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
       <thead> 
 
       <tr> 
 
        <th></th> 
 
        <th>Loads</th> 
 
        <th>Quantity</th> 
 
        <th>Watts</th> 
 
        <th>Hours/day</th> 
 
        <th>Watt Hrs/day</th> 
 
       <tr> 
 
       </thead> 
 
        <tbody> 
 
       <tr> 
 
        <td><input type="checkbox"></td>       
 
        <td>Fans</td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><span id="sum">0</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><input type="checkbox"></td>      
 
        <td>Tubelights</td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><span id="sum">0</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><input type="checkbox"></td>       
 
        <td>Fans</td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><span id="sum">0</span></td> 
 
       </tr> 
 
       <tr> 
 
        <td><input type="checkbox"></td>      
 
        <td>Tubelights</td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><input type="text" class="form-control"></td> 
 
        <td><span id="sum">0</span></td> 
 
       </tr>     
 
       </tbody> 
 
      </table> 
 
      <form id="myform"> 
 
       <input type="text" id="name" placeholder="Name" required="true"/> 
 
       <button type="submit" class="add-row">Add Row</button> 
 
       <button id="remove" type="button">Reomve Selected</button> 
 
      </form>