Removing List Object From Array

by vaiism

HTML

<h2>My List</h2>
<select id="rule_template_interface_id">
    <option data-component-name="Fred">Send for Fred</option>
    <option data-component-name="George">Send for George</option>
    <option data-component-name="Leroy">Send for Leroy</option>
    <option data-component-name="Barney">Send for Barney</option>
</select>
<hr/>
<h2>Original List</h2>
<select id="myListOrig">
    <option>Send for Fred</option>
    <option>Send for George</option>
    <option>Send for Leroy</option>
    <option>Send for Barney</option>
</select>
<hr/>
<button onClick="removeOptions();">Remove Options</button>

JavaScript

function removeOptions() {
    var data = [
        { componentName: "Fred", canSend: true }, 
        { componentName: "Frank", canSend: false },
        { componentName: "Fergie", canSend: false },
        { componentName: "George", canSend: false },
        { componentName: "Leroy", canSend: true },
        { componentName: "Barney", canSend: true }
    ];

    var $components = $('#rule_template_interface_id');
    for(var i = 0; data.length > i; i++) {
        if (data[i].canSend === false) { // then remove it 
            console.log('Can Send: ' + data[i].componentName);
            $components.find('option').filter(function () {
                var $option = $(this);
                if ($option.attr('data-component-name') === data[i].componentName) {
                    console.log(' THE DATA COMPONENT MATCHED: ' + $option.attr('data-component-name'));
                    $option.parent().remove();
                    // $option.remove();
                }
            });
        }
    }

    
    
    
    

}