Knockout.js & Bootstrap 3 - Bread Crumb Pseudo Element - css

Question

I have run into an interesting bug. The CSS pseudo element does not disappear when it's associated element has display: none; in Bootstrap 3.0.2's breadcrumb component. jsFiddle To test: try switching the mode in the view model from "Mode 1" to "Mode 2".
I have a breadcrumb link that I am building using knockout.js. I switch the visibility of the pure li or li with nested a with knockout's visible: onSomeCondition binding. My understanding is that the non-visible li is set with display: none;. However, this does not remove the associated li in the DOM, and I think that makes the CSS keep the pseudo element. For example, I am expecting the following:
Mode 1 / Mode 2
But I get:
/ Mode 1 / Mode 2
The relevant knockout code is:
<ol class="breadcrumb">
<li data-bind="visible: isInMode1()">
Mode 1
</li>
<li class="active" data-bind="visible: !isInMode1()">Mode 1</li>
<li data-bind="visible: isInMode2()">
Mode 2
</li>
<li class="active" data-bind="visible: !isInMode2()">Mode 2</li>
</ol>
The relevant Bootstrap 3.0.2 CSS is below. Based on the Bootstrap style sheet, the "/" character is added as a pseudo "before" element.
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb > li {
display: inline-block;
}
.breadcrumb > li + li:before {
padding: 0 5px;
color: #cccccc;
content: "/\00a0";
}
.breadcrumb > .active {
color: #999999;
}
If there is a better way to do this, or a cross-browser solution that I am not thinking of, I would be grateful for any input. I would prefer not to hack the CSS, but that may be the cleaner solution.
Thank you
Quick Links:
Bootstrap 3.0.2 Breadcrumbs
Knockout.js visible binding documentation

Answer 1

Don't use the "visible" binding, the separator will show even if the element is hidden. Use the "if" and "ifnot" bindngs:
<ol class="breadcrumb">
<li data-bind="if:isInMode1()">
Mode 1
</li>
<li class="active" data-bind="ifnot:isInMode1()">Mode 1</li>
<li data-bind="if:isInMode2()">
Mode 2
</li>
<li class="active" data-bind="ifnot:isInMode2()">Mode 2</li>
</ol>

Answer 2

For the sake of completeness, and because I very rarely find a question I can answer that doesn't already have a brilliant answer.....this is what to do:
<ol class="breadcrumb" data-bind="foreach: contentModel.breadcrumbs">
<!-- ko if: isInMode1($data) -->
<li data-bind="css: cssClass">
</li>
<!-- /ko -->
<!-- ko ifnot: isInMode1($data) -->
<li data-bind="css: cssClass, text: displayName"></li>
<!-- /ko -->
...repeat for isInMode2.......
</ol>
The if: and ifnot: bindings only render SUB elements depending upon their evaluation.....The element that contains the if/ifnot binding is always rendered.