Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Alcibiades Montas
5,974 PointsBuilding a Shopping Cart With Jquery, how to remove?
Hi guys, I am trying to build a shopping list app using Jquery. The way the app should work is that once an user adds an "item" with a text box he/she should be able to remove it by clicking on the "X". I have gotten the "Add Item" functionality working but not sure how to make the "Remove" feature work. Could you guys take a look at my code and advise?
<!DOCTYPE html>
<html>
<head>
<title>My Shopping site</title>
<link rel="stylesheet" type="text/css" href="Shopping.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="Shopping.js"></script>
</head>
<body>
<div class= "container">
<h1> Shopping List </h1>
<p> Add Items to your Shopping List!</p>
<div class="form">
<form name = "listForm" method="post" action="">
<input type="text" id="listItem"/>
<input type="button" id="addButton" value="Add"/>
</form>
</div>
<div id="shoppingList">
<ul>
<li></li>
</ul>
</div>
</div>
</body>
</html>
$(document).ready(function() {
//assigning the click event to the buttom
$('#addButton').click(function(){
var listItem = $('#listItem');
$('#shoppingList ul').append('<li>' + listItem.val() + " X " + '</li>');
listItem.val('').focus();
});
$('#shoppingList ul li').on("click", "X", function () {
$('this').remove();
});
});
4 Answers
James Barnett
39,199 PointsYour main issue is that .on method requires a selector not a string. Also this is a keyword not a string, so remove the quotes.
- in
$('#shoppingList ul li').on("click", "X", function ()Xisn't a valid jQuery selector- instead of
"X"use"li:contains(X)"- to select any
<li>that contains the string "X"
- to select any
- Since you are checking if an
<li>contains a string- shorten your selector from
'#shoppingList ul li'to#shoppingList ul
- shorten your selector from
- instead of
Give that a shot.
If you need more help, edit your original post with your updated code and post a comment about any questions you've got.
Alcibiades Montas
5,974 PointsHi James,
Thank you so much. I have updated the code using your feedback! It works great...a couple of questions,
Instead of it of "li: Contains x" could I have named the span on Jquery and then call it on the removal function. Something like this:
$('#shoppingList ul').append('<li>' + listItem.val() + " <span class='close'>X</span> " + '</li>');
and then call it like this:
$('#shoppingList').on("click", "#shoppingList ul li span.close", function () { $(this).parent().remove(); });
Finally, my code is up and running by working with your suggestions but sometimes I am unable to add an item. How can I troubleshoot this? Thank you so much in advance! Is great to work not just on getting things to work but on getting them to work in the right manner!
Alcibiades Montas
5,974 PointsActually the function was only working once!
I had to take out the .parent() function since I was targeting the li directly.
James Barnett
39,199 PointsI updated my answer to you several times. If you check out the current version it doesn't include that.
Alcibiades Montas
5,974 PointsThanks James! You are amazing!