tbodyで追加された追加情報を削除するには？

Question

以下のスニペットはうまく動作しています。チェックボックスから追加データのID or Classを取得する方法。私はコード$('.chk').click(function(){ console.log(cc);})を試してみましたが、動作しません。私は何をしたいですか？私は2行を追加した後、追加されたデータの1番目のチェックボックスをチェックし、チェックがあるので削除するをクリックします。

$(".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; 
 
    } 
 
    /* 
 
\t Label the data 
 
\t */ 
 
} 
 
.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

基本的にはちょうどそのremoveクラスでこれらの親を見つけ、chkクラスでのみ確認するチェックボックスを選択する必要があります。

あなたのスニペットの改訂版です。

$(".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){ 
 
\t \t var row = $(item).parents(".remove"); 
 
    if (row != null) 
 
    \t 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; 
 
    } 
 
    /* 
 
\t Label the data 
 
\t */ 
 
} 
 
.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>