取消选中复选框时删除li元素 [英] remove li element when checkbox is unchecked

问题描述

我可以动态地在复选框的选中事件上添加新的 li 元素。但是我无法在未经检查的事件中删除它。

> $（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>我的选择< / h3> 
< ul class =ul_secstyle =display：block;> 
< li>< input type =checkboxname =filtervalue =>随机文本1< / li> 
< li>< input type =checkboxname =filtervalue =>随机文本2< / li> 
 
< / ul> 
 
< h3> FILTER< / h3> 
< ul style =display：block;> 
< li>< input class =tmCheckboxtype =checkboxname =filtervalue =Random Text 1>随机文本1< / li> 
< li>< input class =tmCheckboxtype =checkboxname =filtervalue =Random Text 2>随机文本2< / li> 
< li>< input class =tmCheckboxtype =checkboxname =filtervalue =随机文本3>随机文本3< / li> 
< / ul> 
  

解决方案

过滤掉 code>元素基于文本内容使用 filter（） 方法，并使用 remove（） 方法。

  var $ this = this; 
 $（'。ul_sec li'）。filter（function（）{
 return $（this）.text（）== $ this.value; 
}）。remove（）; 
  

 <$如果（this.checked）是一个变量，那么这个变量就是一个函数， {$（'。ul_sec'）。append（$（'< li>'，{html：this.outerHTML + value}））;} else {$（'。ul_sec li'）。filter（function（）{返回$（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_secstyle =display：block;>< / ul>< h3> FILTER< / h3>< ul style =display：block;> < li>< input class =tmCheckboxtype =checkboxname =filtervalue =Random Text 1>随机文本1< / li> < li>< input class =tmCheckboxtype =checkboxname =filtervalue =Random Text 2>随机文本2< / li> < li>< input class =tmCheckboxtype =checkboxname =filtervalue =Random Text 3>随机文本3< / li>< / ul>  

I am dynamically able to add a new li element on checked event of a checkbox. However I am not able to remove the same on the unchecked event.

$(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 CODE:

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

解决方案

Filter out li element based on text content using filter() method and remove it using remove() method.

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>

这篇关于取消选中复选框时删除li元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！