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

查看此代码，这会在您单击复选框时删除当前复选框

代码在这里

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

DOM 删除复选框 javascript

DOM remove a checkbox javascript

html

javascript

checkbox

jquery

checked