Cuando hago clic en una casilla de verificación, agrego algo de contenido a un div (#item_list)
if(cb_new.prop('checked')) { $("#item_list").append("<input type='hidden' name='post[]' value="+ this.value +">"); } else { // ?? }Cuando desmarco la casilla, quiero que se elimine exactamente la misma cadena del div. Manteniéndose todos los demás que tienen un valor diferente (this.value).
Entonces, por ejemplo, podría tener:
<div id="item_list"> <input type="hidden" name="post[]" value="102"> <input type="hidden" name="post[]" value="93"> </div>Pero si desmarco
<input type="checkbox" id="d-102-2" name="d-102" value="102" data-id="d-102">Deseo :
<div id="item_list"> <input type="hidden" name="post[]" value="93"> </div>Si lo reviso de nuevo, lo quiero de vuelta.
¿Cómo puedo hacer eso?
Una solución vainilla JS se vería así:
Actualizado de acuerdo con sus requisitos ampliados .
document.querySelector(`#item_list input[value='${this.value}']`).remove(); Esto consultará el DOM, encontrará un elemento de input , con un atributo de value cuyo valor sea igual a this.value , y lo eliminará del DOM con el método remove() .
Una implementación más detallada no es fácil de dar sin tener más información.
Puede usar el atributo de data para asignar una identificación única a la casilla de verificación, una vez que está marcada, se agrega el elemento de entrada con el mismo data-uid y, una vez desmarcado, eliminamos el elemento de entrada con el mismo data-uid
$(document).ready(function() { $("#cb_new").change(function() { if ($(this).prop('checked')) { $("#item_list").append($("<input data-uid='"+$(this).data('uid')+"' type='text' name='post[]' class='newItem' value='" + $(this).val() + "'>")); } else { $('.newItem[data-uid='+$(this).data('uid')+']').remove(); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <input type="checkbox" id="cb_new" data-uid="8080" value="tick Me" name="test"/><label for="test">Tick Me</label> <div id="item_list" style="border:1px solid tomato"> </div>