Beldion Bryan Balanan Beldion Bryan Balanan - 6 months ago 20
jQuery Question

how to use .removeClass properly

var increment = 0;

$("#dial-save").click(function(){
$(".add-flow").html("");
$(".add-flow").append("<button type='button' class='btn btn-w-s btn-ivr'><i class='fa fa-hand-o-down p-xxs' aria-hidden='true'></i>Dial</button>");

switch(increment) {
case 0:
$(".flow-preview").append("<div class='col-md-1'></div><div class='col-md-1'></div><div class='col-md-10 add-flow'><button type='button' class='btn add-applet' data-toggle='modal' data-target='#myModalAddApplet'>Add Applet</button></div>");
increment++;
$("#myModalAppletDial").modal('hide');
$( ".add-flow:first-child" ).removeClass("add-flow");
break;

case 1:
$(".flow-preview").append("<div class='col-md-1'></div><div class='col-md-1'></div><div class='col-md-1'></div><div class='col-md-9 add-flow'><button type='button' class='btn add-applet' data-toggle='modal' data-target='#myModalAddApplet'>Add Applet</button></div>");
increment++;
$("#myModalAppletDial").modal('hide');
break;

};

});


I need help on changing the line
$( ".add-flow:first-child" ).removeClass("add-flow");
. What I am trying to do here is remove
add-flow
from all tags except for the one I am appending...

Answer

Try the following

switch(increment) {
            case 0:
            $('.flow-preview').find( ".add-flow" ).removeClass("add-flow");
            $(".flow-preview").append("<div class='col-md-1'></div><div class='col-md-1'></div><div class='col-md-10 add-flow'><button type='button' class='btn add-applet' data-toggle='modal' data-target='#myModalAddApplet'>Add Applet</button></div>");
            increment++;
            $("#myModalAppletDial").modal('hide');
            break;

            case 1:
            $(".flow-preview").append("<div class='col-md-1'></div><div class='col-md-1'></div><div class='col-md-1'></div><div class='col-md-9 add-flow'><button type='button' class='btn add-applet' data-toggle='modal' data-target='#myModalAddApplet'>Add Applet</button></div>");
            increment++;
            $("#myModalAppletDial").modal('hide');
            break;

};