Puedo agregar dinámicamente un nuevo elemento li en el evento marcado de una casilla de verificación. Sin embargo, no puedo eliminar lo mismo en el evento unchecked .
$(document).ready(function() { var value; $(".tmCheckbox").change(function() { if (this.checked) { value = $(this).val(); $('.ul_sec').append($('<li>', { text: value })); } else { // $(this).parent().remove(); } }); });CÓDIGO HTML:
<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>Filtre el elemento li según el contenido del texto usando el método filter() y elimínelo usando el método remove() .
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>Simplemente use remove() en el destino donde se adjunta
Como esto:
$(document).ready(function() { var value; $(".tmCheckbox").change(function() { if (this.checked) { value = $(this).val(); $('.ul_sec').append($('<li>', { text: value })); } else { $('.ul_sec li').last().remove(); } }); });document.getElementById("yourid").remove(); dando una identificación al <li> que acaba de agregar.