I've built a small application for a user to request machines to be built. I do this by saving the specifics into localStorage when a form is submitted, and then looping through the storage variables to display a detail look of the request.. The display portion of this loops through local storage and appends a ul
with an li
input for each of the pieces of info that pertain to each particular machine.
Below is a rough example of what my display ends up looking like right before they submit. I need to select the value of each input
, and use it within a localStorage.Removeitem('all machine 1 input values go here');
I apologize for the rough code, i'm new to most of this.
<ul name="machine-1">
<li><input type="button" value="Del"></li>
<li><input value="name1"></li>
<li><input value="number1"></li>
</ul>
<ul name="machine-2">
<li><input type="button" value="Del"></li>
<li><input value="name2"></li>
<li><input value="number2"></li>
</ul>
Heres the portion of my loop that builds the lists.
$("#theRequest").append('<ul id="machine-'+ machinec +'"><li style="border:none;margin-left:0em;padding-right:0em;"><input class="delete" type="button" id="del-'
+ machinec +'" value="Del"></li><li>'
+ '</li><li style="border:none;margin-left:0em;padding-right:0em;"><input class="edit" type="hidden" value="Edit"></li>'
+ '</li><li><input style="width:35px;" disabled type="text" value="'
+ nomember + '"></li><li><input style="width:20px;" disabled type="text" value="'
+ ecmpny + '"></li><li><input style="width:20px;" disabled type="text" value="'
+ estore + '"></li><li><input style="width:60px;" disabled type="text" value="'
+ hmachineType + '"></li><li><input disabled type="text" value="'
+ efullname + '"></li><li><input disabled type="text" value="'
+ etitle + '"></li><li><input disabled type="hidden" value="'
+ hrequested + '"></li><li><input disabled type="hidden" value="'
+ eemail + '</li></ul>');
Here is my guess at how to 'remove' the particular machine and clear it out of localStorage. I'm basically not selecting it right, and if i were, I still think it would only select one of the grandchildrens values?
// Delete a Machine
$('.delete').click(function() {
if (confirm('Are you sure you want to remove this item?')) {
var parent = $(this).parents('ul');
var grandchildren = parent.children().children();
parent.hide();
inputName = grandchildren.attr('value');
localStorage.removeItem(inputName);
}
else {}
});
I would try something like this
// Delete a Machine
$('.delete').click(function() {
if (confirm('Are you sure you want to remove this item?')) {
var parent = $(this).parents('ul').eq(0); // just in case you have more than one ul ancestor
parent.hide();
parent.find('input').each(function() {
localStorage.removeItem($(this).attr('value'));
});
}
});
By the way, if you're using jQuery 1.7 or later, you could use $('.delete').on("click", function() {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.