Скрыть детский элемент без воздействия на высоту

Question

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

Это мой код

$("#warnings").children("a").hide().filter(".Other").show(); 

Fiddle Link

Я хочу, чтобы показать весь видимый якорь должен быть на вершине.

Answer 1

Это происходит из-за br элементов

var $as = $("#warnings").children("a"); 
 
$as.next('br').addBack().hide(); 
 
$as.filter(".Other").next('br').addBack().show();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="warnings"> 
 
    <h4>Warning(s)</h4> 
 
    <p>Please select the warning(s) item to navigate to appropriate control</p> 
 
    <a href="#" class="subject">Subject</a> 
 
    <br> <a href="#" class="subject">Subject</a> 
 
    <br> <a href="#" class="Contract">Contract</a> 
 
    <br> <a href="#" class="Contract">Subject</a> 
 
    <br> <a href="#" class="Contract">Contract</a> 
 
    <br> <a href="#" class="Site">Site</a> 
 
    <br> <a href="#" class="Site">Site</a> 
 
    <br> <a href="#" class="Site">Site</a> 
 
    <br> <a href="#" class="View">View</a> 
 
    <br> <a href="#" class="View">View</a> 
 
    <br> <a href="#" class="Other">Other</a> 
 
</div>

---

Другим решением является проще использовать Calss

$("#warnings").children("a").addClass('hidden').filter(".Other").removeClass('hidden');

#warnings a.hidden, 
 
#warnings a.hidden + br { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="warnings"> 
 
    <h4>Warning(s)</h4> 
 
    <p>Please select the warning(s) item to navigate to appropriate control</p> 
 
    <a href="#" class="subject">Subject</a> 
 
    <br> <a href="#" class="subject">Subject</a> 
 
    <br> <a href="#" class="Contract">Contract</a> 
 
    <br> <a href="#" class="Contract">Subject</a> 
 
    <br> <a href="#" class="Contract">Contract</a> 
 
    <br> <a href="#" class="Site">Site</a> 
 
    <br> <a href="#" class="Site">Site</a> 
 
    <br> <a href="#" class="Site">Site</a> 
 
    <br> <a href="#" class="View">View</a> 
 
    <br> <a href="#" class="View">View</a> 
 
    <br> <a href="#" class="Other">Other</a> 
 
</div>

Answer 2

Удалить <br /> и добавить CSS:

#warnings a { 
    display: block; 
} 

Это сделает все <a> появляться на их собственной линии