Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

removing Items from the running list of values

Posted on 2011-09-07
15
Medium Priority
?
281 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:Gurvinder Pal Singh
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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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:
Gurvinder Pal Singh earned 2000 total points
ID: 36500659
So, what is pending now? Why are both these question not closed? :)
0

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

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

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…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…

661 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