Home checkbox foreach remove exact items from first wrapper and modal with jquery

Questions

checkbox foreach remove exact items from first wrapper and modal with jquery

August 13, 2023

I have a wrapper that have some lis with class="ad-item". in each of these lis i have a checkbox. if a checkbox checked it gets that checkbox li and send it to the modal. and If already checked checkbox clicked again to make uncheck it should delete that li from modal.

I know how to add items to modal but don’t know how to remove that li from modal with unchecked in first wrapper.

this is my html and js so far:

        $('.add-to-modal').each(function () {
          $(this).change(function () {
            if (this.checked) {
              $(".modal").append($(this).closest('.item').clone());
            }
            else {
              $(".modal").find($('.item')).remove();
            }
          });
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-wrapper">
    <li class="item">
        <p>title 1</p>
        <label>
            <input type="checkbox" value="123" class="add-to-modal">
         add to modal</label>
    </li>
    <li class="item">
        <p>title 2</p>
        <label>
            <input type="checkbox" value="125" class="add-to-modal">
         add to modal</label>
    </li>
    <li class="item">
        <p>title 3</p>
        <label>
            <input type="checkbox" value="163" class="add-to-modal">
         add to modal</label>
    </li>
    <li class="item">
        <p>title 4</p>
        <label>
            <input type="checkbox" value="223" class="add-to-modal">
         add to modal</label>
    </li>
</ul>

<ul class="modal">

</ul>

my exact problem is in jquery with

else{
$(".modal").find($('.item')).remove();
}

this code will remove all items.

also if I use $(this) it refers to the checkbox from first-wrapper.

note that if you want to use checkbox value, all items are dynamic and not have these values

another question is how can I create a button in each item of modal that if i click on it. the modal item remove and the same item in first wrapper checkbox make unchecked.

thanks

>Solution :

The issue is because your code is removing all .item elements when any single one is deselected, not just the actual checkbox which was interacted with.

You can solve the problem, and make your code much more simple and succinct, by using map() to build an array of all the li which contain checked boxes when any one of them is interacted with, then using this to set the content of .modal:

const $modal = $('.modal');
const $checkboxes = $('.add-to-modal').on('change', e => {
  let modalContent = $checkboxes.filter(':checked').map((i, cb) => $(cb).closest('.item').clone()).get();
  $modal.html(modalContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-wrapper">
  <li class="item">
    <p>title 1</p>
    <label>
      <input type="checkbox" value="123" class="add-to-modal">
      add to modal
    </label>
  </li>
  <li class="item">
    <p>title 2</p>
    <label>
      <input type="checkbox" value="125" class="add-to-modal">
      add to modal
    </label>
  </li>
  <li class="item">
    <p>title 3</p>
    <label>
      <input type="checkbox" value="163" class="add-to-modal">
      add to modal
    </label>
  </li>
  <li class="item">
    <p>title 4</p>
    <label>
      <input type="checkbox" value="223" class="add-to-modal">
      add to modal
    </label>
  </li>
</ul>

<ul class="modal"></ul>

Note that you don’t need an explicit each() loop. When binding an event handler to multiple elements, jQuery will iterate over all elements for you.