jQuery удаление класса из родительского div не работает

Question

есть ли у кого-нибудь идеи, почему removeClass не работает для меня? оба removeClass по запросу, а также .required не работают в любом случае.

JSFiddle: http://jsfiddle.net/6y4wdf7g/10/

if ($(".required").val() === '') { 
    $(".required").parent().addClass("has-error"); 
    $("#response").removeClass("alert-success"); 
    $("#response").addClass("alert-warning"); 
    $("#response .message").html("<strong>Error</strong>: It appear's you have forgotten to complete something!"); 
    $("#response").fadeIn(); 
} else { 
    $(".required").parent().removeClass("has-error"); 
    // ..... 
} 

Answer 1

Во-первых, глядя на HTML-код, опубликованный на JSFiddle, я заметил, что у вас есть два элемента, используя id="response". Это вызовет проблему. Идентификатор должен быть уникальным, и, следовательно, только один элемент должен иметь одинаковый идентификатор.

Технически, removeClass работает. Проблема в вашей логике. Вы используете $(".required").val() === '', чтобы проверить ВСЕ поля, которые не будут работать. Если в первом поле .required есть значение, а не в какой-либо из остальной части .required, логика автоматически инициирует предложение else (поскольку первая итерация .required технически имеет значение). Если в первом поле формы .required нет значения, предполагается, что все поля формы пустые, и, следовательно, класс remove не будет работать.

Если я понять вещи правильно, вы хотите сделать что-то больше, как это:

var errorCounter = 0; 

$(".required").each(function(i, obj) { 

    if($(this).val() === ''){ 
     $(this).parent().addClass("has-error"); 
     errorCounter++; 
    } else { 
     $(this).parent().removeClass("has-error"); 
    } 

}); 

if (errorCounter > 0) { 
    $("#response").removeClass("alert-success").addClass("alert-warning").fadeIn(); 
    $("#response .message").html("<strong>Error</strong>: It appear's you have forgotten to complete something!"); 
} 

Надеется, что это помогает. Дайте знать, если у вас появятся вопросы.

Answer 2

Из информации, которую вы дали, я бы предположить, что либо ваш запрос является недействительным или имена классов не согласуются между кодом и HTML.