Remove a list item

3 posts, 1 answers
  1. Purushothama
    Purushothama avatar
    11 posts
    Member since:
    Jun 2016

    Posted 28 Sep Link to this post

    Hi,

    I have a radiobuttolist with 3 items.

    <telerik:RadRadioButtonList ID="RadRadioButtonList1" runat="server"AutoPostBack="False">

        <Items>
            <telerik:ButtonListItem Text="Approve" Value="value1"Selected="True" />
            <telerik:ButtonListItem Text="Return" Value="value2" />

      <telerik:ButtonListItem Text="Reject" Value="value3" />
        </Items>
    </telerik:RadRadioButtonList>

     

    I need to remove 3rd item from the list on client click of some other control (for example on button client click). Is that possible? If yes, how can I remove it from client side using jQuery?

    At the end result I should I have only 2 options: Approve and Return.

     

    And if I click again on the button, It should display all 3items.

    Thanks in advance for your valuable help.

  2. Answer
    Attila Antal
    Admin
    Attila Antal avatar
    5 posts

    Posted 29 Sep Link to this post

    Hello Purushothama,

    Best practice is to use hide/show methods, and only remove/add if necessary. The code snippet below demonstrates both ways.

    <script type="text/javascript">
        var listItem = null;
     
        $(document).ready(function () {
            listItem = $("button[value='Reject']");
        })
     
        function addRemoveItem(sender, args) {
            var rbList = $('#RadRadioButtonList1');
            ($("button[value='Reject']").length < 1 ? rbList.append(listItem) : $("button[value='Reject']").remove());
        }
     
        function showHideItem(sender, args) {
            if ($("button[value='Reject']").length > 0)
                listItem.is(":visible") ? listItem.hide() : listItem.show();
        }
    </script>

    Attached you can find the working sample. Please try it out and see if that works for you.


    Regards,
    Attila Antal
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Purushothama
    Purushothama avatar
    11 posts
    Member since:
    Jun 2016

    Posted 29 Sep in reply to Attila Antal Link to this post

    Hello Attila Antal,

    Thanks a lot for your quick response. As you suggested I am using Show/Hide method. It is absolutely working fine for me.

     

Back to Top