DOM删除一个复选框javascript答案

【问题标题】：DOM remove a checkbox javascriptDOM删除一个复选框javascript
【发布时间】：2017-12-07 17:00:42
【问题描述】：

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

【问题讨论】：

$(this).remove??
1.找到您感兴趣的元素类型 $('thatelement') 2. 将 .change 方法附加到该元素 3. 编写您希望在更改该元素 (this).remove() 或可能 (this) 时发生的函数.hide 如果你只想隐藏它
感谢您的帮助！我会看看这个:)

标签： javascript jquery html checkbox checked

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：