Here is the code block that I am working with:
<div class="user-select-dropdown">
<span class="filter-header">User:</span>
<span class="remove-option">✖</span>
<select class="form-control" ng-model="filter.UserId" ng-change="filterModel(filter)" ng-options="item.Id as item.Name for item in usersList">
<option value="" disabled selected>Select user...</option>
</select>
</div>
The X span serves as a button to reset the select option. However, when the select has no options, the remove-option span should have the style display: none;. It needs to be displayed once an option is chosen.
The CSS styles are defined as follows:
.remove-option {
display: none;
bottom: 14%;
color: darkgrey;
font-size: 15px;
position: absolute;
right: 7%;
z-index: 99999;
cursor: pointer;
}
.user-select-dropdown {
position: relative;
display: inline-block;
margin-left: 10px;
width: 250px;
}
I've also included some jQuery code:
$(".remove-option").click(function () {
$(this).next("select").val($("select option:first").val());
});
$(".form-control").change(function () {
if ($(this).val() >= 0)
$(this).next(".remove-option").css("display: block");
else
$(this).next(".remove-option").css("display: none");
});
The .form-control class is from Bootstrap.
The issue lies with
$(this).next(".remove-option").css(...)