Solved

removing Items from the running list of values

Posted on 2011-09-07
15
278 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy 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: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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Active Directory replication delay is the cause to many problems.  Here is a super easy script to force Active Directory replication to all sites with by using an elevated PowerShell command prompt, and a tool to verify your changes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

751 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