CODEWITHSUNDEEP
jquery
Andrew Simpson
Andrew Simpson

Reputation: 7314

remove item from checklist using jquery

I have an asp.net web page.

I am using the asp.net checkboxlist control.

Is it possible to remove an item using jquery?

I can enumerate through the checked array but cannot seem to remove a checked item.

I have this which does not work:

       function ConfirmDialog(message) {
        $('<div></div>').appendTo('body')
                .html('<div><h6>' + message + '?</h6></div>')
                .dialog({
                    modal: true, title: 'Delete', zIndex: 10000, autoOpen: true,
                    width: 'auto', resizable: false,
                    buttons: {
                        Yes: function () {
                            var selectedItems = "";
                            $("[id*=chkEmailClients] input:checked").each(function () {
                                var emailClient = $(this).next().html();

                                //                                    jQuery(this).closest('chkEmailClients.tr').remove();

                                alert($(this).closest('tr').html());
                                try {
                                    $(this).closest('tr').remove();
                                    return false;
                                }
                                catch (error) {
                                    alert(error);
                                }
                            });
                            $(this).dialog("close");
                        },
                        No: function () {
                            $(this).dialog("close");
                        }
                    },
                    close: function (event, ui) {
                        $(this).remove();
                    }
                });
    };

This is the DOM stuff:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <span id="chkEmailClients" style="display: inline-block; color: Black; font-family: Verdana;
            font-size: 8pt; height: 200px; width: 270px;">
            <input id="chkEmailClients_0" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_0"
                value="[email protected]"><label for="chkEmailClients_0">[email protected]</label><br>
            <input id="chkEmailClients_1" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_1"
                value="[email protected]"><label for="chkEmailClients_1">[email protected]</label><br>
            <input id="chkEmailClients_2" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_2"
                value="[email protected]"><label for="chkEmailClients_2">[email protected]</label><br>
            <input id="chkEmailClients_3" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_3"
                value="[email protected]"><label for="chkEmailClients_3">[email protected]</label><br>
            <input id="chkEmailClients_4" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_4"
                checked="checked" value="[email protected]"><label for="chkEmailClients_4">[email protected]</label><br>
            <input id="chkEmailClients_5" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_5"
                value="[email protected]"><label for="chkEmailClients_5">[email protected]</label><br>
            <input id="chkEmailClients_6" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_6"
                value="[email protected]"><label for="chkEmailClients_6">[email protected]</label><br>
            <input id="chkEmailClients_7" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_7"
                value="[email protected]"><label for="chkEmailClients_7">[email protected]</label><br>
            <input id="chkEmailClients_8" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_8"
                value="[email protected]"><label for="chkEmailClients_8">[email protected]</label><br>
            <input id="chkEmailClients_9" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_9"
                value="[email protected]"><label for="chkEmailClients_9">[email protected]</label><br>
            <input id="chkEmailClients_10" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_10"
                value="[email protected]"><label for="chkEmailClients_10">[email protected]</label><br>
            <input id="chkEmailClients_11" type="checkbox" name="ctl00$MainContent$chkEmailClients$chkEmailClients_11"
                value="[email protected]"><label for="chkEmailClients_11">[email protected]</label></span>
    </div>
</body>
</html>

Upvotes: 0

Views: 145

Answers (2)

Andrew Simpson
Andrew Simpson

Reputation: 7314

To any one who is interested. The answers provided by @Milind Anantwar was correct. I had set the Repeatlayout to flow which meant that the rendered html was in input/label mode. By changing to table it worked. I should never program when i am tired

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82231

asp.net generate a table from your checkboxlist, and in order to remove an option you must remove actually a TR. add this code in loop you have.

 $(this).closest('tr').remove();
 return false;

See this

Upvotes: 2

Related Questions