Trafalgar D Law Trafalgar D Law - 1 month ago 5
HTML Question

How to remove the added append in tbody?

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

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>

Comments