如何删除tbody中添加的附加内容？

Question

我在下面的这个片段工作正常。如何从复选框中获取附加数据的ID or Class。当我尝试下面的代码$('.chk').click(function(){ console.log(cc);})但它不起作用。我想要发生的是在我添加两行之后，我在添加数据中选中第一个复选框，然后单击删除它将删除，因为它有一个检查。

＆＃13;

＆＃13;

$(".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();
});

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

基本上您只需选中chk类的复选复选框，然后找到remove类的父级。

Bellow是您的代码段的修订版。

＆＃13;

＆＃13;

$(".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();
  });
});

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;