I have a custom select dropdown. When clicking a button, I want to delete the selected option from the custom dropdown. All I've been able to do is delete from the hidden select and not the custom.
My code only deletes from the standard select, the custom select options remain unchanged in the dropdown.
<html>
<style>
body {
background-image: url('https://images.adsttc.com/media/images/5016/09f4/28ba/0d15/9800/083c/large_jpg/stringio.jpg');
}
.custom-select {
position: relative;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
text-align: center;
}
.custom-select select {
display: none;
}
.select-selected {
background-color: transparent;
}
.select-selected:after {
position: absolute;
content: "";
right: 10px;
top: 15px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: #fff transparent transparent transparent;
}
.select-selected.select-arrow-active:after {
border-color: transparent transparent #fff transparent;
top: 7px;
}
.select-items div, .select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid transparent;
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
cursor: pointer;
user-select: none;
border-radius: 40px;
font-family: "Cinzel", serif;
}
.select-items {
position: absolute;
background-color: black;
top: 100%;
left: 0;
right: 0;
z-index: 101;
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, .2);
border-radius: 40px;
backdrop-filter: blur(5px);
}
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(255, 255, 255, 0.2);
}
</style>
<body>
<div class="custom-select">
<select id="animal"></select>
</div>
<button onclick="myFunction();">Remove</button>
<script>
let options = ["Select", "Elephant", "Gorilla", "Grizzly Bear", "Lion", "Polar Bear", "Rhino", "Tiger"];
const zoo = document.getElementById("animal");
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.value = options[i];
option.text = options[i];
zoo.appendChild(option);
}
function myFunction() {
var zoo = document.getElementById("favteam");
zoo.remove(zoo.selectedIndex);
}
</script>
<script>
var x, i, j, l, ll, selElmnt, a, b, c;
x = document.getElementsByClassName("custom-select");
l = x.length;
for (i = 0; i < l; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
ll = selElmnt.length;
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 1; j < ll; j++) {
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function (e) {
var y, i, k, s, h, sl, yl;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
sl = s.length;
h = this.parentNode.previousSibling;
for (i = 0; i < sl; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
yl = y.length;
for (k = 0; k < yl; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function (e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, xl, yl, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
xl = x.length;
yl = y.length;
for (i = 0; i < yl; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < xl; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);
</script>
</body>
</html>