How to remove element when that is unselected using checkbox in Jquery?

Question

I have few checkboxes with name. when i checked checkbox then i want to add that one in selected filter list that is working fine but now i want to remove it when i unselected checkbox. How can do that?

What i tried:-

$(function() {
  $('.filter-list li input').click(function() {
    var thisVal = $(this).next('span').text();
    if ($(this).prop('checked')) {
      $('.selected-filters ul').prepend('<li>' + thisVal + '<span class="remove-filter">X</span></li>');
    } else {}
  })
})

.selected-filters {
  padding: 0px;
  margin-bottom: 8px;
  overflow: hidden;
}

.selected-filters h5 {
  font-size: 14px;
  font-family: hindSemibold;
  color: #005173;
}

.selected-filters ul {
  margin: 0px;
  padding: 0px;
}

.selected-filters ul li {
  list-style: none;
  float: left;
  border: 1px solid #ccc;
  margin: 4px;
  font-size: 13px;
  padding: 1px 5px;
  background: #f6fdff;
}

.selected-filters ul li a {
  color: #333;
}

.selected-filters ul li span.remove-filter {
  font-size: 11px;
  padding-left: 5px;
  cursor: pointer;
}

.selected-filters ul li a:hover {
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="selected-filters">
  <h5>Selected Filters</h5>
  <ul>
  </ul>
</div>


<ul class="filter-list">
  <li><label><input type="checkbox"><span>Andaman and Nicobar Islands</span></label></li>
  <li><label><input type="checkbox"><span>Andhra Pradesh</span></label></li>
  <li><label><input type="checkbox"><span>Arunachal Pradesh</span></label></li>
  <li><label><input type="checkbox"><span>Assam</span></label></li>
  <li><label><input type="checkbox"><span>Bihar</span></label></li>
</ul>

Answer will be appreciated:-

Answer 1

You can try with :contains() selector which select all elements that contain the specified text:

$(function(){
  $('.filter-list li input').click(function(){
    var thisVal = $(this).next('span').text();
    if($(this).prop('checked')){
      $('.selected-filters ul').prepend('<li>' + thisVal + '<span class="remove-filter">X</span></li>');
    }
    else{
      $('.selected-filters ul li:contains('+thisVal+')').remove();
    }
  });
});

.selected-filters{ padding: 0px; margin-bottom: 8px; overflow: hidden;}
.selected-filters h5{ font-size: 14px; font-family: hindSemibold;  color: #005173;}
.selected-filters ul{ margin: 0px; padding: 0px;}
.selected-filters ul li{ list-style: none; float: left; border: 1px solid #ccc; margin: 4px; font-size: 13px; padding: 1px 5px; background: #f6fdff;}
.selected-filters ul li a{ color: #333;}
.selected-filters ul li span.remove-filter{ font-size: 11px; padding-left: 5px; cursor: pointer;}
.selected-filters ul li a:hover{ text-decoration: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="selected-filters">
  <h5>Selected Filters</h5>
  <ul></ul>
</div>

<ul class="filter-list">
  <li><label><input type="checkbox"><span>Andaman and Nicobar Islands</span></label></li>
  <li><label><input type="checkbox"><span>Andhra Pradesh</span></label></li>
  <li><label><input type="checkbox"><span>Arunachal Pradesh</span></label></li>
  <li><label><input type="checkbox"><span>Assam</span></label></li>
  <li><label><input type="checkbox"><span>Bihar</span></label></li>
</ul>