本文介绍了取消选中复选框时删除li元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我可以动态地在复选框的选中事件上添加新的 li
元素。但是我无法在未经检查的
事件中删除它。
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>元素基于文本内容使用方法,并使用方法。
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元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!