Estoy usando jQuery para eliminar un elemento con la clase llamada " added ". Hay varios elementos con este nombre de clase.
$(".steps-row-first").on("change", ".anotherCheese", function() { if($(this).val() == 'no') { $(this).parent().next(".added").remove(); } else { $(".steps-row-first").append("<div class='added'></div>"); } });Aquí está el HTML:
<div class="steps-row-first"> <div class="form-group"> <div class="radio-wrapper"> <div class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="yes"> <label>Yes</label> </div> <div class="radio-group"> <input type="radio" class="anotherCheese" name="anotherCheese" value="no"> <label>No</label> </div> </div> </div> <div style="clear:both;"></div> <div class="added"></div> </div>Cuando hago clic en el botón de opción no, el elemento no se elimina, ¿qué estoy haciendo mal?
Su jQuery es incorrecto para eliminar el elemento. En $(this).parent().next(".added").remove(); , $(this) es el elemento de entrada, por lo que su padre es solo el elemento .radio-group . Debe cambiarlo a $(this).parents('.radio-wrapper').next(".added").remove();
Incluso lo anterior no funcionará porque hay un <div> entre .radio-wrapper y .added , para que funcione, debe usar next() dos veces: $(this).parents('.radio-wrapper').next().next(".added").remove();
No sé, ¿dónde está exactamente el .steps-row-first
pero intente usar a los padres para volver y luego elija los hermanos de los padres para apuntar a su div con clase agregada como se muestra a continuación:
.... if($(this).val() == 'no') { $(this).parents(".form-group").siblings(".added").remove(); } .... $(".steps-row-first").on("change", ".anotherCheese", function() { if($(this).val() == 'no') { $(".steps-row-first").find(".added").remove(); } else { $(".steps-row-first").append("<div class='added'></div>"); } });puede usar find () para encontrar todas las clases .agregadas y eliminarlas