Remove time from dynamically generated dropdown

Question

I have a dropdown that has times within a start and end time. I also have times displayed on my page that are "booked". I am trying to create a function that see if any "booked" values match the dropdown values, and if so, remove them from the array. I am having trouble figuring out how to design my JavaScript function to do so and would greatly appreciate any help in this.

remove.js

$(function () {
    var removeItem = document.getElementsByClassName('set');

    $('#time').find('option[value=="' + removeItem + '"]').remove();
});

time.js

var start = document.getElementById('start').innerHTML.split('.').join('').toLocaleLowerCase();
var end = document.getElementById('end').innerHTML.split('.').join('').toLocaleLowerCase();
var time = document.getElementById('time');

time.disabled = true;

var slotTimes = [];
document.getElementById("length").onchange = function (evt) {
    var timeDistance = evt.target.value;
    var startMoment = moment(start, "h:mm a");
    var endMoment = moment(end, "h:mm a");
    slotTimes = [];

    while (startMoment.isSameOrBefore(endMoment)) {
        slotTimes.push(startMoment.format("h:mm a"));
        startMoment = startMoment.add(timeDistance, 'minutes');
    }

    addDropdown();
    disabled();
};

function disabled(option) {
    if (option != "") {
        time.disabled = false;
    }
}

function addDropdown() {
    var doc = '',
        times = slotTimes,
        i;
    for (i = 0; i < times.length; i++) {
        doc += "<option value='" + times[i] + "'>" + times[i] + "</option>";
    }

    document.getElementById('time').innerHTML = doc;
    disabled();
}

Answer 1

First, you ought to be using jQuery!

$('#foo') is the same as document.getElementById('foo')

$('.bar') is the same as document.getElementByClassName('bar')

Now to address your question, you are trying to put an html element

ie document.getElementByClassName('set')

in place of a value. Try running console.log(removeItem) and you will see what I mean.

I think what you are trying to do is this:

$(document).ready(function() {

  $('.set').each(function() { //loop over all elements with a class == 'set'

    const removeItem = $(this).val(); //get value of each element 

    $('#time').find('option=[value=="' + removeItem + '"]').remove();
  });

});

If you need any more help let me know.

Hope this helps!

Update

You should put the removeItem loop at the end of the addDropdown function:

function addDropdown() {
    var doc = '',
        times = slotTimes,
        i;
    for (i = 0; i < times.length; i++) {
        doc += "<option value='" + times[i] + "'>" + times[i] + "</option>";
    }

    document.getElementById('time').innerHTML = doc;
    disabled();


  $('.set').each(function() { //loop over all elements with a class == 'set'

    const removeItem = $(this).val(); //get value of each element 

    $('#time').find('option=[value=="' + removeItem + '"]').remove();
  });
}

Update 2

I would recommend rewriting your code to use the selectpicker bootstrap package. It looks like most of the "features" you are trying to make have simple keywords that selectpicker uses.

For example, to disable an option from this dropdown:

<select class="selectpicker" id="toppings">
  <option id="opt_1">Mustard</option>
  <option id="opt_2">Ketchup</option>
  <option id="opt_3">Relish</option>
</select>

You simply do:

$('#opt_2').prop('disabled', true);

If you need to reference specific specific options by their parent dropdown, you can use the children method:

$('#toppings').children('.someClass').prop('disabled', true);

This will change all options of the toppings dropdown that have a class="someClass" to disabled.

I'm sure there are several features of the selectpicker package that you will find useful later on too!

I'm not sure what the problem is with your code specifically, but it is looking more and more like the selectpicker package, which you can use for free.