Trying to delete specific checked elements using jquery

Question

I can't seem to figure out how to delete an element using jQuery. I'm creating a sample shopping list app and I'm able to add items as needed but I cannot figure out how to remove checked items. What am I missing?

 jQuery(document).ready(function() {
$('.addStuff').on('click', function() {
var htmlStr = '<div class = "appItem"> <div class = "priority"> Priority: <select> <option value="high"> High</option> <option value="medium"> Medium</option> <option value="low"> Low </option> </select> </div> Done: <input type = "checkbox" class = "checkDone" name = "status" value = "done" /> <br/> To do item: <input type ="text" class = "listItem"  name = "item" /> </div>';
$(this).closest('#outsideBox').append(htmlStr);
});

$('.removeStuff').on('click',function(){

 var checkedstuff = $(this).closest('#outsideBox').find('.checkDone').is(':checked');
 checkedstuff.hide();

});
});

Here is my HTML:

<html >
<head>
        <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
        <title> ShopIt </title>
        <link rel="stylesheet" type = "text/css" href = "shoppapp.css" />
        <script src="jquery-1.9.1.min.js"></script>
        <script src="shopapp.js" type="text/javascript"></script>


</head>
<body>

    <h1> Shop It! </h1>
    <div id = "outsideBox">
        <div id = "functionButtons">
        <button class = "addStuff"> Add Item </button>
        <button class = "removeStuff"> Remove Checked Items </button>
        </div>
        <div class = "appItem">
            <div class = "priority">
            Priority: <select> 
                <option value="high"> High</option>
                <option value="medium"> Medium</option>
                <option value="low"> Low </option>
            </select>
            </div>

            Done: <input type = "checkbox" class = "checkDone" name = "status" value = "done" /><br/>
            To do item: <input type ="text" class = "listItem"  name = "item" />
        </div>
    </div>
<footer>
    <p> Thinful Project, Unit 3 </p>
</footer>
</body>
</html>

var checkedstuff = $(this).closest('#outsideBox').find('.checkDone').is(':checked'); will return a bool since .is() returns either true or false — Dom
– Dom, Commented Aug 14, 2013 at 21:36
Changing is to filter, and targeting the right element, here's something "working": jsfiddle.net/hsPgs . Note that $(this).closest('#outsideBox') is unnecessary (and causes jQuery to do much more work than necessary) - you can just use $("#outsideBox") because id attributes should be unique — Ian
– Ian, Commented Aug 14, 2013 at 21:40

Tor · Accepted Answer · 2013-08-14 21:41:46Z

1

Is() returns a boolean. You can use the :checked selector. Then use parent() to remove the entire parent of the shopping item. See this fiddle: http://jsfiddle.net/MKPcK/

var checkedstuff = $(this).closest('#outsideBox').find('.checkDone:checked').parent();
 checkedstuff.hide();

answered Aug 14, 2013 at 21:41

Tor

7841 gold badge15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Aditya Gorti Over a year ago

Yep, that worked. I figured it had to be something simple I was missing. Thanks!

Nicolae Olariu Over a year ago

Just keep in mind that hide() will only set a "display: none" on the element, hiding it, but it still occupies memory, it'll still be present in DOM, so if you want them to be deleted (freeing memory space also), use remove() instead.

Tor Over a year ago

Good point Nicolae. Use hide() only if you want to show() it afterwards or otherwise use the hidden data.

Nicolae Olariu Over a year ago

And I'll also recommend using [...].find('.checkDone:checked').closest('.appItem') to get the parent div, because if you're gonna change your 'htmlStr' inside your addStuff click handler, and your checkboxes will be nested at least 1 level deeper, [...].find('.checkDone:checked').parent() won't work as expected. But... as long as you keep your 'checkDone' checkboxes as direct children of 'appItem', the code will work fine...

Nicolae Olariu · Accepted Answer · 2013-08-14 21:44:22Z

0

Try:

$('.removeStuff').on('click', function() {
    $('#outsideBox').find('.checkDone:checked').closest('.appItem').remove();
});

edited Aug 14, 2013 at 21:44

answered Aug 14, 2013 at 21:39

Nicolae Olariu

2,5652 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Trying to delete specific checked elements using jquery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related