erikTsomik
asked on
removing Items from the running list of values
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().re move();
$(this).remove();
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list) ;
return false;
});
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().re
$(this).remove();
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list)
return false;
});
ASKER
it removes all the elements from the running list rather than just one per click
ASKER
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").substri ng(2);
alert(ID);
$(this).parent().prev().re move();
$(this).remove();
//alert(index);
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list) ;
return false;
});
$(".options li").bind("click", function(){
var ID = $(this).attr("id").substri
alert(ID);
$(this).parent().prev().re
$(this).remove();
//alert(index);
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list)
return false;
});
ASKER
may be I need to refer to specific
.options li. because with 3 boxes checked it will have 3 set of .options li.
.options li. because with 3 boxes checked it will have 3 set of .options li.
Sorry, i am confused, please explain the requirement again
ASKER
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").substri ng(2);
//alert(ID);
// $(this).parent().prev().re move();
//$(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;
});
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").substri
//alert(ID);
// $(this).parent().prev().re
//$(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;
});
ASKER
here is my entire code including the checkboxes
$('#bodyIDList').data('val ue', []);
ajax call come here for each search
$(".myCheckboxClass").chan ge(functio n() {
var list = $('#bodyIDList').data('val ue');
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().re move();
}
$("#bodyIDList").val(list) ;
$(".options li").bind("click", function(){
var ID = $(this).attr("id").substri ng(2);
//alert(ID);
// $(this).parent().prev().re move();
//$(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;
});
})
$('#bodyIDList').data('val
ajax call come here for each search
$(".myCheckboxClass").chan
var list = $('#bodyIDList').data('val
if( $(this).is(":checked") ) {
list.push( $(this).val());
var text = $('label[for=' + $(this).val() + ']').text();
$("#selectedListSelected")
$("#selectedListSelected")
} 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().re
}
$("#bodyIDList").val(list)
$(".options li").bind("click", function(){
var ID = $(this).attr("id").substri
//alert(ID);
// $(this).parent().prev().re
//$(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;
});
})
ASKER
is there any updates on this
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??
ASKER
I do want to rebuild the list because i need to know presicesely what are the selected items are
<< 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??
You meant 'I don't want to rebuild the list' right??
ASKER
I meant i do want to rebuild it
In that case answer is already given here
https://www.experts-exchange.com/questions/27291333/get-a-list-of-selected-checkboxes-using-Jquery.html
#36493631
Pending question was, if you click on the list item to delete it, how to uncheck the checkbox also, right??
https://www.experts-exchange.com/questions/27291333/get-a-list-of-selected-checkboxes-using-Jquery.html
#36493631
Pending question was, if you click on the list item to delete it, how to uncheck the checkbox also, right??
ASKER
right . Well what I came out with upon checking the chewckbox I am disabling the checkbox it just easier this way
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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").substri
$(this).parent().prev().re
$(this).remove();
var index = list.indexOf(ID);
list.splice(index, 1);
$("#bodyIDList").val(list)
return false;
});