Solved

removing Items from the running list of values

Posted on 2011-09-07
15
277 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
ID: 36497122
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
ID: 36497166
it removes all the elements from the running list rather than just one per click
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36497218
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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
LVL 19

Author Comment

by:erikTsomik
ID: 36497232
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
ID: 36497478
Sorry, i am confused, please explain the requirement again
0
 
LVL 19

Author Comment

by:erikTsomik
ID: 36497557
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
ID: 36497702
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 36498148
is there any updates on this
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36500471
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
ID: 36500493
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
ID: 36500633
<< 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
ID: 36500637
I meant i do want to rebuild it
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36500646
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
ID: 36500653
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
ID: 36500659
So, what is pending now? Why are both these question not closed? :)
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

820 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