Remove a list item

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

    Posted 28 Sep 2017 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
    89 posts

    Posted 29 Sep 2017 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
    13 posts
    Member since:
    Jun 2016

    Posted 29 Sep 2017 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