DOM remove a checkbox javascript

Question

I'm quite new to Javascript and don't know where to start for this one. I have a list of checkboxes. I want to achieve when a checkbox is checked, the checkbox is removed from the list. I found some different solutions but they all have a button you need to press to remove the checkbox and i just want the checkbox removed when it's checked.

This is how my HTML looks like:

<ul class="list-group">
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Item 1
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox"> Item 2
                            </label>
                        </div>
                    </li>
                </ul>

1. Find the type of element you are interested $('thatelement') 2. Attach .change method to that 3. Write function that you are expecting to happen when you do change that element (this).remove() or maybe (this).hide if you want just to hide it — Learn on hard way
– Learn on hard way, Commented Dec 7, 2017 at 8:57

mplungjan · Accepted Answer · 2017-12-07 09:00:12Z

1

Depending on how precise you need to be, here is one that will remove the parent LI when clicked

You can add if (this.checked) { ... } if you only want to remove when checked

$(function() {
  $("input[type=checkbox]").on("click",function() {
    $(this).closest("li").remove(); // $(this).remove(); to remove the checkbox only
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="list-group">
  <li class="list-group-item">
    <div class="checkbox">
      <label><input type="checkbox"> Item 1</label>
    </div>
  </li>
  <li class="list-group-item">
    <div class="checkbox">
      <label><input type="checkbox"> Item 2</label>
    </div>
  </li>
</ul>

edited Dec 7, 2017 at 9:00

answered Dec 7, 2017 at 8:59

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

Comments

Mohd Aman · Accepted Answer · 2017-12-07 09:00:42Z

See this code , this is removing current checkbox while you are clicking on checkbo

Code Here

$( '.checkbox input[type="checkbox"]' ).change( function(){
  $(this).remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group">
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox">
                            </label>
                        </div>
                    </li>
                    <li class="list-group-item">
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" class="checkbox">
                            </label>
                        </div>
                    </li>
                </ul>

Collectives™ on Stack Overflow

DOM remove a checkbox javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related