How to remove the added append in tbody?

Question

I have this snippet below working fine. How to get the ID or Class of the append data from the checkbox. As I try below code $('.chk').click(function(){ console.log(cc);}) but its not working. What I want to happen is After the I added two lines and I check the 1st checkbox in added data and click the remove it will remove because it has a check.

 $(".checkAll").change(function() { $(".selectall").prop('checked', $(this).prop("checked")); $(".gone").removeAttr('checked'); }); $('.vv .ww').on('click', function() { $("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>'); }); $('.chk').click(function() { console.log(cc); }) $('.gone').click(function() { var aa = $('.chk').val(); var bb = $('.chk').is('checked'); console.log(aa); console.log(bb); $(".remove").remove(); });

 @media only screen and (max-width: 640px) { /* Force table to not be like tables anymore */ .no-more-tables table, .no-more-tables thead, .no-more-tables tbody, .no-more-tables th, .no-more-tables td, .no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } .hdv { width: 46%; padding: 5px; display: inline-block; } .dsp { font-weight: bold; } .no-more-tables tr { border: 1px solid #ccc; } .no-more-tables td { /* Behave like a "row" */ width: 100%; border: none; border-bottom: 1px solid #eee; white-space: normal; text-align: left; } /* Label the data */ } .cf { width: 100%; } .cf > tr > th { text-align: left; } .cf > tbody > tr > td { height: 25px; } .newvariation > td > input:focus { outline: 0px !important; -webkit-appearance: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .vv > div { margin: 5px; display: inline-block; cursor: pointer; } @media only screen and (min-width: 641px) { .dsp { visibility: hidden; display: none; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="no-more-tables"> <table class="table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th class="c1"> <input type="checkbox" class="checkAll" /> </th> <th class="c2">Product</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="selectall" /> </td> <td> <span class="hdv dsp">Product</span> <span class="hdv" contenteditable="true">iPhone 7 Plus</span> </td> <td> </td> </tr> </tbody> </table> </div> <div class="vv"> <div class="ww">+ Add new Line</div> <div class="gone">- Remove selected</div> </div>

Answer 1

Basically you just need to select only checked checkbox with chk class, then find these parent with remove class.

Bellow is the revision of your snippet.

 $(".checkAll").change(function() { $(".selectall").prop('checked', $(this).prop("checked")); $(".gone").removeAttr('checked'); }); $('.vv .ww').on('click', function() { $("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>'); }); $('.chk').click(function() { console.log(cc); }) $('.gone').click(function() { $('input:checked.chk').each(function(idx, item){ var row = $(item).parents(".remove"); if (row != null) row.remove(); }); });

 @media only screen and (max-width: 640px) { /* Force table to not be like tables anymore */ .no-more-tables table, .no-more-tables thead, .no-more-tables tbody, .no-more-tables th, .no-more-tables td, .no-more-tables tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ .no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } .hdv { width: 46%; padding: 5px; display: inline-block; } .dsp { font-weight: bold; } .no-more-tables tr { border: 1px solid #ccc; } .no-more-tables td { /* Behave like a "row" */ width: 100%; border: none; border-bottom: 1px solid #eee; white-space: normal; text-align: left; } /* Label the data */ } .cf { width: 100%; } .cf > tr > th { text-align: left; } .cf > tbody > tr > td { height: 25px; } .newvariation > td > input:focus { outline: 0px !important; -webkit-appearance: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; } .vv > div { margin: 5px; display: inline-block; cursor: pointer; } @media only screen and (min-width: 641px) { .dsp { visibility: hidden; display: none; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="no-more-tables"> <table class="table-bordered table-striped table-condensed cf"> <thead class="cf"> <tr> <th class="c1"> <input type="checkbox" class="checkAll" /> </th> <th class="c2">Product</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox" class="selectall" /> </td> <td> <span class="hdv dsp">Product</span> <span class="hdv" contenteditable="true">iPhone 7 Plus</span> </td> <td> </td> </tr> </tbody> </table> </div> <div class="vv"> <div class="ww">+ Add new Line</div> <div class="gone">- Remove selected</div> </div>