DOMチェックボックスを外すjavascript

Question

私はJavascriptを新しくしていて、これをどこから始めるべきかわかりません。私はチェックボックスのリストを持っています。チェックボックスをオンにすると、チェックボックスがリストから削除されます。私はいくつかの異なる解決策を見つけましたが、それらはすべてあなたがチェックボックスを削除するために押す必要があるボタンがあります。

これは私のHTMLがどのように見えるかです：あなたがする必要がどのように正確に応じて

<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> 

Answer 1

、ここであなたが

をクリックしたときに、親LIを削除するものですチェックしたときにのみ削除したい場合はif (this.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>

Answer 2

あなたはcheckbo

コードここ

$('.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>