未选中复选框时删除 li 元素答案

【问题标题】：remove li element when checkbox is unchecked未选中复选框时删除 li 元素
【发布时间】：2017-07-31 17:12:18
【问题描述】：

我可以在复选框的选中事件上动态添加新的li 元素。但是我无法在 unchecked 事件中删除相同的内容。

$(document).ready(function() {

    var value;

    $(".tmCheckbox").change(function() {
        if (this.checked) {
            value = $(this).val();
            $('.ul_sec').append($('<li>', {
                text: value
            }));
        } else {
            // $(this).parent().remove();
        }

    });
});

HTML 代码：

<h3>MY SELECTION </h3>
<ul class="ul_sec" style="display: block;">
    <li><input type="checkbox" name="filter" value="">Random Text 1</li>
    <li><input type="checkbox" name="filter" value="">Random Text 2</li>

</ul>

<h3>FILTER</h3>
<ul style="display: block;">
    <li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 1">Random Text 1</li>
    <li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 2">Random Text 2</li>
    <li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 3">Random Text 3</li>
</ul>

【问题讨论】：

请分享您的 HTML 代码
显示html代码

标签： javascript jquery html checkbox

【解决方案1】：

使用filter()方法根据文本内容过滤掉li元素，使用remove()方法将其移除。

var $this = this;
$('.ul_sec li').filter(function(){
    return $(this).text() == $this.value;
}).remove();

$(document).ready(function() {

  var value;

  $(".tmCheckbox").change(function() {
    var value = $(this).val();
    if (this.checked) {
      $('.ul_sec').append($('<li>', {
        html: this.outerHTML + value
      }));
    } else {
      $('.ul_sec li').filter(function() {
        return $(this).text() == value;
      }).remove();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>MY SELECTION </h3>
<ul class="ul_sec" style="display: block;">
</ul>

<h3>FILTER</h3>
<ul style="display: block;">
  <li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 1">Random Text 1</li>
  <li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 2">Random Text 2</li>
  <li><input class="tmCheckbox" type="checkbox" name="filter" value="Random Text 3">Random Text 3</li>
</ul>

【讨论】：

这会在 else 语句中
我也想加上复选框。

【解决方案2】：

只需将remove() 用于附加它的目标

像这样：

$(document).ready(function() {

    var value;

    $(".tmCheckbox").change(function() {
        if (this.checked) {
            value = $(this).val();
            $('.ul_sec').append($('<li>', {
                text: value
            }));
        } else {
             $('.ul_sec li').last().remove();
        }

    });
});

【讨论】：

这会从列表中删除 all <li> 元素
需要使用li:last，指定id 或类似名称才能完成这项工作。

【解决方案3】：

document.getElementById("yourid").remove(); 为您刚刚添加的 <li> 提供一个 ID。

【讨论】：