我使用对复选框值的更改进行的参数过滤创建了一个搜索页面。
$('#parameters input[type="checkbox"]:enabled').bind('change', function(e) {
var $this = $(this),
$checkedBoxes = $('#parameters').find('input:checkbox').filter(':checked').length,
index = $('#parameters input:checkbox').index($this),
txt = jQuery.trim($this.parent().text());
if ($checkedBoxes === 0) {
//remove all filters
$('#filters > ul > li').remove();
} else {
if ($this.is(':checked')) {
// add filter text
var filterLink = $('<li>' + txt + '<span>Remove filter</span></li>');
$.data(filterLink, 'myIndex', index);
alert($.data(filterLink, 'myIndex'));
$('#filters > ul').append(filterLink);
} else {
// remove filter text
$('#filters > ul').find('li[class=' + index + ']').remove();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<ul id="parameters">
<li>
<label for="premium">
<input type="checkbox" id="premium" name="filters" value="true" />Premium
</label>
</li>
<li>
<label for="articles">
<input type="checkbox" id="articles" name="articles" value="true" />Articles
</label>
</li>
<li>
<label for="news">
<input type="checkbox" id="news" name="news" value="true" />News
</label>
</li>
<li>
<label for="other">
<input type="checkbox" id="other" name="other" value="true" />Other
</label>
</li>
</ul>
<div id="filters">
<p>Filters applied:</p>
<ul>
<!-- Filters applied insert here -->
</ul>
</div>
我正在显示在动态列表中应用了哪个过滤器,并使用 jQuery 的.data()方法将关联存储在列表过滤器元素上。
现在,当我取消选中相应的复选框时,我想根据存储在所述元素上的数据删除过滤器 li 元素。我以前在 class 属性上执行此操作,但认为使用.data()是一个更简洁的解决方案。
不能完全弄清楚如何删除适当的列表元素?