Удалить границу, когда свойство display установлено в none

Question

Это кажется простой задачей, но по какой-то причине у меня возникают проблемы с удалением границы, когда для свойства display установлено значение none.

Из того, что я всегда понимал, является то, что когда свойство display имеет значение установлен в none, он удаляет этот элемент из потока html. Тем не менее, в приведенном мной примере он все еще показывает границу с последним элементом.

<div class="outer">
  <div class="inner">
    <div class="control">Foo</div>
    <div class="control d-none">Bar</div>
  </div>
</div>

https://jsfiddle.net/6hfzpcoL/

Answer 1

Элемент 'd-none' все еще присутствует, он только не виден пользователю. если вы осмотрите контейнер, то увидите, что он все еще там, поэтому Foo не считается последним ребенком, поэтому граница все еще применяется.

То, чего вы пытаетесь достичь, не может быть выполнено только с CSS вам нужно будет использовать Javascript или JQuery.