Remove checked checkboxes using JQuery

Question

I'm trying to remove my checked checkboxes using

$(".gone").removeAttr('checked');

If you scroll to the bottom and click + Add new Line it will append another <tr>. What I'm trying to do is remove a <tr> if the checkbox is checked. So if I check multiple boxes it will remove all the <tr>'s that are checked. What am I doing wrong? Why aren't the checkboxes being removed with the above code?

This is my live example: https://jsfiddle.net/nwqmvo36/17/

****UPDATE****

Tried using

 $(document).on("click", "div.rem", function() {
     $(this).closest("tr:checked").remove();
 });

This did not work either. I'm trying different solutions, I just don't understand what I'm doing wrong.

Alex Char · Accepted Answer · 2017-02-17 22:16:54Z

3

You don't need to use event delegation. This will make sense if you want to add for example event listeners to elements that append after that the DOM has been loaded. In your situation you can add an event listener to the element with class .gone and then find all checked checkboxes and remove the parent tr. You can use the following code:

$(".gone").on("click", function() {
    $('.no-more-tables') // element container
        .find(":checkbox:checked") // return checked checkbox(es)
        .closest('tr') // return first parent tr
        .remove(); // remove them
});

Also a demo

References

edited Feb 17, 2017 at 22:16

answered Oct 5, 2016 at 7:11

Alex Char

33.3k9 gold badges51 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

unlvt Over a year ago

Thank you for explaining the process.

unlvt Over a year ago

Can I prevent this from removing the header?

Alex Char Over a year ago

@unlvt You can ask a different question as this one fulfill your OP.

Trafalgar D Law · Accepted Answer · 2016-10-05 07:00:10Z

Here I updated a code for you. You didn't call the class of the checkboxes

$(".checkAll").change(function () {
    $(".selectall").prop('checked', $(this).prop("checked"));
    $(".gone").removeAttr('checked');
});

$('.vv div:first-child').on('click', function(){
 $("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" class="selectall" /></td><td><span class="hdv dsp">Product</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 1</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 2</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 3</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp" contenteditable="true">Variation 4</span><span class="hdv" contenteditable="true">--</span></td><td><span class="hdv dsp">Quantity</span><span class="hdv" contenteditable="true">1</span></td><td><span class="hdv dsp">Price</span><span class="hdv" contenteditable="true">$00.00</span></td></tr>');
});


$('.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>
        				<th class="c3" contenteditable="true">Variation 1</th>
        				<th class="c4" contenteditable="true">Variation 2</th>
        				<th class="c5" contenteditable="true">Variation 3</th>
        				<th class="c6" contenteditable="true">Variation 4</th>
        				<th class="c7">Quantity</th>
        				<th class="c8">Price</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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>
        			<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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>
        			<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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>
        			<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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>
        			<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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>
        			<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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>
        			<tr class="removeAttr">
        				<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>
        				  <span class="hdv dsp" contenteditable="true">Variation 1</span>
                  <span class="hdv" contenteditable="true">64GB</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 2</span>
                  <span class="hdv" contenteditable="true">Matte Black</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 3</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp" contenteditable="true">Variation 4</span>
                  <span class="hdv" contenteditable="true">--</span>
                </td>
                <td>
        				  <span class="hdv dsp">Quantity</span>
                  <span class="hdv" contenteditable="true">3</span>
                </td>
                <td>
        				  <span class="hdv dsp">Price</span>
                  <span class="hdv" contenteditable="true">$964.36</span>
                </td>
        			</tr>

        		</tbody>
        	</table>
        </div>
<div class="vv">
  <div>+ Add new Line</div>
  <div class="gone">- Remove selected</div>
</div>

This is only removing the check from the box. Not the actual <tr>
What do you mean by I've attached the button to the code but when I click on the button it does not remove the checked boxes. What am I doing wrong? then? So that's not what you want?
If you scroll to the bottom and click + Add new Line it will append another <tr>. What I'm trying to do is remove a <tr> if the checkbox is checked. So if I check multiple boxes it will remove all the <tr>'s that are checked.

Aschab · Accepted Answer · 2016-10-05 00:41:22Z

0

You're removing the checked attribute, not the object, you need to use the checked selector

try this:

$(".gone:checked").remove();

answered Oct 5, 2016 at 0:41

Aschab

1,3992 gold badges15 silver badges32 bronze badges

Collectives™ on Stack Overflow

Remove checked checkboxes using JQuery

3 Answers 3

3 Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related