title: Want to remove the uncheck checkbox value from the list in jquery
body: <p>When I check on any of the checkbox I get the value in li, if I uncheck the first checkbox and then check the second checkbox, I want to remove the text/value of the first check box as show below :</p>
  
  <p><a href="https://i.stack.imgur.com/SJqxN.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>Below is my code : </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('input[type="checkbox"]').bind('change', function() {
      var alsoInterested = '';
      $('input[type="checkbox"]').each(function(index, value) {
          if (this.checked) {
              /*add*/ /*get label text associated with checkbox*/
              alsoInterested += ($('label[for="'+this.name+'"]').html() + ', ');
          }
      });
      if (alsoInterested.length &gt; 0) {
          alsoInterested = alsoInterested.substring(0,alsoInterested.length-2);
      } else {
          alsoInterested = '';
      }
  
  console.log(alsoInterested);
      
                 var li = $('&lt;li&gt;'+alsoInterested+'&lt;li/&gt;').appendTo('#list');
              $("#ul").append(li);
  });
  
  
  $('li').click(function()
  {
   alert('test');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> li
   {
    float:left;
      width: auto;
      background: #ccc;
      margin:10px;
      display:inline-block;
      cursor: pointer;
  }
  
  li:hover::after {
      content: 'x';
      color: white;
      margin: 10px;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="checkbox" id="bannanasChk" name="bannanasChk" value="N"&gt;
      &lt;label for="bannanasChk" class="light"&gt;Bannanas&lt;/label&gt;
  
      &lt;input type="checkbox" id="carChk" name="carChk" value="N"&gt;
      &lt;label for="carChk" class="light"&gt;Car Monkeys&lt;/label&gt;
      
      &lt;input type="checkbox" id="apesChk" name="apesChk" value="N"&gt;
      &lt;label for="apesChk" class="light"&gt;Apes&lt;/label&gt;
      
      &lt;input type="checkbox" id="repairChk" name="repairChk" value="N"&gt;
      &lt;label for="repairChk" class="light"&gt;Car Repair&lt;/label&gt;
          &lt;br&gt;
          
          &lt;ul class="list-unstyled" id="list"&gt;
         &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>