Solved

removing Items from the running list of values

Posted on 2011-09-07
15
280 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 
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

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
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 …

632 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