Проверка бутстрапа: 2 глификона перекрываются

Question

У меня есть подтверждение для двух полей, которые являются кодом страны и действительным мобильным номером. Я добавил скриншот. Когда указывается правильный код страны и недействителен мобильный, в это время не указывается правильный тиковый глификон для кода страны и кросс-глификон, который накладывается друг на друга. Мне нужно удалить глификон для кода страны, используя css или js. Любая помощь будет оценена.

Answer 1

Я нашел ответ. Я сделал это, используя jQuery.

Мой фактический HTML был ниже,

<div class="input-group"> 
    <div class="input-group-addon">+</div> 
    <input type="tel" maxlength="3" class="form-control pull-left" id="CountryCode" name="CountryCode" placeholder="Code"> 
    <input data-bv-field="Mobile" type="text" id="Mobile" name="Mobile" class="form-control"> 
</div> 

Bootstrap создает glyphicons для правильного и неправильного ниже HTML, как показано ниже,

<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="CountryCode" style=""></i> 
<i class="form-control-feedback bv-no-label bv-icon-input-group glyphicon glyphicon-ok" data-bv-icon-for="Mobile" style=""></i> 

Так я добавил следующие одна строка кода, чтобы удалить правильно и неверные глификоны для кода страны,

$("#CountryCode").parent().next().removeClass('glyphicon-ok glyphicon-remove'); 

Answer 2

Если вы используете JQuery:

скажем, у вас есть

<div class="container"> 
    <div class="form"> 
    form content... 
    </div> 
</div> 

вы бы назвали:

$('.container form .glyphicon').each(function(i){ // your target input id or class should be placed between 'form' and '.glyphicon' eg: $('.container form input[name=state_code] .glyphicon') 
    if (i!=0) $(this).remove(); 
}); 

таким образом избавиться от дополнительного Xes появляется, когда вам это не нужно.