Remove Items from cloned ASP.Net DropDownlist using jQuery based on condition

Hi landomarossi,

Please refer below sample.

HTML

<form id="form1" runat="server">
<div id="container">
    <div>
        <asp:DropDownList ID="ddl1" runat="server" BackColor="Yellow" CssClass="pure-u-23-24">
            <asp:ListItem Text="[ == Please Select == ]" Value="" />
            <asp:ListItem Text="2022-006" Value="2022-006" />
            <asp:ListItem Text="2022-007" Value="2022-007" />
            <asp:ListItem Text="2022-008" Value="2022-008" />
            <asp:ListItem Text="2022-009" Value="2022-009" />
            <asp:ListItem Text="2022-010" Value="2022-010" />
            <asp:ListItem Text="2022-011" Value="2022-011" />
            <asp:ListItem Text="2022-012" Value="2022-012" />
            <asp:ListItem Text="2022-013" Value="2022-013" />
            <asp:ListItem Text="2022-014" Value="2022-014" />
            <asp:ListItem Text="2022-015" Value="2022-015" />
        </asp:DropDownList>
    </div>
    <br />
    <div>
        <asp:DropDownList ID="ddl2" runat="server" BackColor="Yellow" CssClass="pure-u-23-24">
            <asp:ListItem Text="[ == Please Select == ]" Value="" />
            <asp:ListItem Text="foo" Value="foo" />
            <asp:ListItem Text="donald" Value="donald" />
        </asp:DropDownList>
    </div>
    <br />
    <div>
        <asp:Button ID="btnClone" Text="Clone" runat="server"/><br />
        <br />
        <br />
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=btnClone]").bind("click", function () {
            var index = $("#container select").length + 1;
            //Clone the DropDownList
            var ddl1 = $("select[id$=ddl1]").clone();
            var ddl2 = $("select[id$=ddl2]").clone();
            //Set the ID and Name
            ddl1.attr("id", "ddl_" + index);
            ddl1.attr("name", "ddl_" + index);

            ddl2.attr("id", "ddl2_" + index);
            ddl2.attr("name", "ddl2_" + index);

            //[OPTIONAL] Copy the selected value
            $('#container select').each(function () {
                ddl1.find('option[value="' + $(this).find('option:selected').val() + '"]').remove();
            });

            var selectedValue2 = $("select[id$=ddl2] option:selected").val();
            ddl2.find("option[value = '" + selectedValue2 + "']").replaceWith("selected", "selected");

            //Append to the DIV.
            $("#container").append(ddl1);
            $("#container").append("<br /><br />");
            $("#container").append(ddl2);
            $("#container").append("<br /><br />");
            return false;
        });
    });
</script>

Screenshot