Solved

removing Items from the running list of values

Posted on 2011-09-07
15
271 Views
Last Modified: 2012-05-12
I have a running list of values from the drop down. When I click on the
delete I need to remove the Li (it works), but also remove the value of just deleted item

<label id="2"></label>
<ul id="2" class="options">
<li id="2">John</li>
</ul>

 $(".options li").bind("click", function(){                                                                                    var ID = $(this).attr("id");                                                
$(this).parent().prev().remove();
$(this).remove();
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list);
return false;
});
0
Comment
Question by:erikTsomik
  • 9
  • 6
15 Comments
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
you can't have duplicate ids for more than one element

make it


<label id="label2"></label>
<ul id="ui2" class="options">
<li id="li2">John</li>
</ul>

 $(".options li").bind("click", function(){                                                                                    
var ID = $(this).attr("id").substring(2);                                                
$(this).parent().prev().remove();
$(this).remove();
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list);
return false;
});
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
it removes all the elements from the running list rather than just one per click
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
if I checked 3 checkbox my running list will have 3 values, and then I want to remove 1 item it removes all items even though the value is different

 $(".options li").bind("click", function(){
                                                                  
                                                                        var ID = $(this).attr("id").substring(2);
                                                                        alert(ID);
                                                                        
                                                                         $(this).parent().prev().remove();
                                                                         $(this).remove();
                                                                        
                                                                        //alert(index);
                                                                        var index = list.indexOf(ID);
                                                list.splice(index, 1);
                                                                         $("#bodyIDList").val(list);
                                                                        return false;
                                                                    });
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
may be  I need to refer to specific

.options li. because with 3 boxes checked it will have 3 set of .options li.
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
Sorry, i am confused, please explain the requirement again
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
ok the reqs are . I have the search routine by name. oNce i type the name i get the list of name that matches the criteria along with the checkboxes. Upon checking the checkox i put the id into running list of IDs and display selected item at the buttom (it will be multiples).

Each item of the list will have a remove button upon clicking the remove i need to remove that item from the list of selected items and update running list (remove ID of the clicked item)

For example when I selectect 3 name my html looks like this
<label id="1"></label>
<ul id="ul1" class="options">
<li id="li1">Johnnie</li>
</ul>
<label id="l2"></label>
<ul id="ul2" class="options">
<li id="li2">john</li>
</ul>
<label id="l3"></label>
<ul id="ul3" class="options">
<li id="li3">John2</li>
</ul>

My running list will be
<input id="bodyIDList" type="hidden" value="1,2,3" name="bodyIDList[]">

Once I click on the remove all values from this list get removed

 $(".options li").bind("click", function(){
                                                                  
                                                                        var ID = $(this).attr("id").substring(2);
                                                                        //alert(ID);
                                                                        
                                                                        // $(this).parent().prev().remove();
                                                                         //$(this).remove();
                                                                        $("ul[id=ul" + ID + ']').remove();
                                                                        $("label[id=l" + ID + ']').remove();
                                                                        
                                                                        //alert(index);
                                                                        var index = list.indexOf(ID);
                                                list.splice(index, 1);
                                                                         $("#bodyIDList").val(list);
                                                                        return false;
                                                                    });
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
here is my entire code including the checkboxes

$('#bodyIDList').data('value', []);

ajax call come here for each search

$(".myCheckboxClass").change(function() {
            
                                                                  var list = $('#bodyIDList').data('value');
                                                                  if( $(this).is(":checked") ) {
                                                                        list.push( $(this).val());
                                                                        var text = $('label[for=' + $(this).val() + ']').text();
                                                                    $("#selectedListSelected").append('<label id=l' +  $(this).val() + '></label>');
                                                                    $("#selectedListSelected").append('<ul class="options" id=ul' +  $(this).val() +'><li id=li' + $(this).val() + '>' + text + '</li></ul>');
                                                                   } else {
                                                                          var index = list.indexOf($(this).val());
                                                                    list.splice(index, 1);
                                                                        
                                                                        $("ul[id=ul" + $(this).val() + ']').remove();
                                                                        $("label[id=l" + $(this).val() + ']').remove();
                                                                        // $(this).parent().prev().remove();
                                                                         
                                                                        
                                                                }
                                                                  
                                                                  $("#bodyIDList").val(list);

                                                                   $(".options li").bind("click", function(){
                                                                  
                                                                        var ID = $(this).attr("id").substring(2);
                                                                        //alert(ID);
                                                                        
                                                                        // $(this).parent().prev().remove();
                                                                         //$(this).remove();
                                                                        $("ul[id=ul" + ID + ']').remove();
                                                                        $("label[id=l" + ID + ']').remove();
                                                                        
                                                                        //alert(index);
                                                                        var index = list.indexOf(ID);
                                                                        if (index != -1) {
                                                                              list.splice(index, 1);
                                                                              $("#bodyIDList").val(list);
                                                                        }
                                                                        return false;
                                                                    });
                                                                  
                                                                  
                                                            })
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
is there any updates on this
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
your code that you have posted above is quite different from what i had suggested in other question. You don't want to refresh entire list again, when any option is deleted or checkbox is checked??
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
I do want to rebuild the list because i need to know presicesely what are the selected items are
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
<< I do want to rebuild the list because i need to know presicesely what are the selected items are>>
You meant 'I don't want to rebuild the list' right??
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
I meant i do want to rebuild it
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
In that case answer is already given here
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27291333.html
#36493631

Pending question was, if you click on the list item to delete it, how to uncheck the checkbox also, right??
0
 
LVL 19

Author Comment

by:erikTsomik
Comment Utility
right . Well what I came out with upon checking the chewckbox I am disabling the checkbox it just easier this way
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
Comment Utility
So, what is pending now? Why are both these question not closed? :)
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now