inefficient jquery usage - multiple selected

Question

My IDE is throwing a unique warning.

the jQuery code is :

var $xcol = $("#xcol");
var $ycol = $("#ycol");
var $filtercol = $("#filtercol");

$filtercol.on('change', function(event, params) {
        // can now use params.selected and params.deselected
        var value;
        var text;
        if (params.selected){
            value =  params.selected;
            $("#xcol option[value='"+value+"']").remove();
            $("#ycol option[value='"+value+"']").remove();
            $xcol.trigger("chosen:updated");
            $ycol.trigger("chosen:updated");
        }
        else if (params.deselected){
            value =  params.deselected;
            text = $("#filtercol option[value='"+value+"']").text()
            $xcol.append('<option value="'+ value +'">'+ text +'</option>');
            $ycol.append('<option value="'+ value +'">'+ text +'</option>');
            $xcol.trigger("chosen:updated");
            $ycol.trigger("chosen:updated");
        }

    });

the warning is flagged on this line of code:

 $("#xcol option[value='"+value+"']").remove();

How can I fix this warning? THANKS!

Answer 1

One quick way is to not add many selectors when leading with an ID:

$("#xcol option[value='"+value+"']").remove();
$("#filtercol option[value='"+value+"']").text()

to

$("#xcol").find("option[value='"+value+"']").remove(); 
$("#filtercol").find("option[value='"+value+"']").text()