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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With