javascript - jQuery 根据复选框状态切换 div 中的文本

Question

我仍在学习 jQuery 的过程中，遇到了一些我似乎无法解决的问题。我正在尝试切换位于页面其他位置的 div 中的复选框的标签。到目前为止，我已经设法仅在未选中该复选框的情况下附加标签，但我不知道如何在未选中该复选框的情况下仅删除该过滤器的文本。有什么建议吗？

JQUERY:

  $('.filter-single').on('click', function () {
    if ($('.filter-single input').is(':checked')) {
      $('<li>'+$(this).text()+' / </li>').appendTo('.filters-current');
    } else {
    // what goes here?
    }
  });

过滤 HTML:

 <div class="checkbox filter-single">
   <input type="checkbox" value=".rain"/>
   <label>Rain</label>
 </div>

标签 HTML:

<div class="filter-details">
    <span class="filter-title">Filters:</span>
    <ul class="filters-current"></ul>
</div>

Answer 1

<强> Demo

您可以使用:contains()查找相应的 LI，然后 .remove() ，我还将点击处理程序分配给输入本身而不是像这样的容器:

$('.filter-single input').on('click', function () {
    if ($(this).is(':checked')) {
        $('<li>' + $(this).next("label").text() + ' /</li>').appendTo('.filters-current');
    } else {
        $(".filters-current").find("li:contains('" + $(this).next("label").text() + " /')").remove();
    }
});