I am making a shopping list app. When an item is added
to the text input, it should be converted into a list item with a class of "tile" and added
to the beginning of
the list with a class of ".shopping_item_list". Here is my HTML:
<section>
<h1 class="outline">Shopping List Items</h1>
<ul class="shopping_item_list">
<li class="tile">Flowers<span class="delete">Delete</span></li>
</ul>
</section>
My jQuery:
$("input[name='shopping_item']").change(function() {
var item = $(this).val();
$("<li class='tile'>+ item +</li>").prependTo(".shopping_item_list");
$(".tile").removeClass("middle");
$(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});
This isn't working, and I can't figure out why. I'm new
to jQuery.
Also, I need
to add
the "delete" span
to the list item and am not sure
how.
Thanks for any help you can offer!
Edited
to add:
Thanks
to the feedback here, I was able
to make it work with:
$("input[name='shopping_item']").change(function() {
var item = $(this).val();
$("<li class='tile'>" + item + "<span class='delete'>Delete</span>" + " </li>").prependTo(".shopping_item_list");
$(".tile").removeClass("middle");
$(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});
However, in my jquery, I have functions for
the classes "tile" and "delete" that are not working for newly added items.
// hide delete button
$(".delete").hide();
// delete square
$(".tile").hover(function() {
$(this).find(".delete").toggle();
});
$(".tile").on("click", ".delete", function() {
$(this).closest("li.tile").remove();
$(".tile").removeClass("middle");
$(".shopping_item_list li:nth-child(3n+2)").addClass("middle");
});
// cross off list
$(".tile").click(function() {
$(this).toggleClass("deleteAction");
});
The new items, which have these classes applied aren't using these functions at all. Do I need
to add
the functions below
the add item? Does
the order in which they appear in my js file matter? Do I need
to add some kind of function?
