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>

DOM删除一个复选框javascript

2 个答案: