调用remove（）之后如何重新添加元素？

我有一个2下拉列表，我希望第二个下拉列表的值根据用户为第一个下拉列表选择的内容而改变。

$( "#route" ).change(function(){
routeSelect = $(this).val();

$("#clear").remove();

switch(routeSelect){
    case 'Q':
        console.log(routeSelect);
        for(var i=0;i<routeQ.stopTitle.length;i++){
            $("#stopTitle").append("<option id=\"clear \" value="+ routeQ.stopTitle[i].name + ">"+ routeQ.stopTitle[i].name + "</option>");
        }
        break;
    case 'T':
        //$("#clear").remove();
        console.log(routeSelect);
        for(var i=0;i<routeT.stopTitle.length;i++){
            $("#stopTitle").append("<option id=\"clear \" value="+ routeT.stopTitle[i].name + ">"+ routeT.stopTitle[i].name + "</option>");
        }
        break;
    default:
        console.log(routeSelect);
        break;
}
});

当我第一次选择第一个下拉列表时，此代码有效，但是在调用remove（）之后，它不再追加。

例如，我在第一个下拉列表中选择Q，第二个空下拉列表正确附加，但是当我选择T时，第二个下拉列表不会更改。