CODEWITHSUNDEEP
javascriptjquerycheckbox
Aditya Gorti
Aditya Gorti

Reputation: 83

Trying to delete specific checked elements using jquery

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>

Upvotes: 0

Views: 1677

Answers (2)

Nicolae Olariu
Nicolae Olariu

Reputation: 2555

Try:

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

Upvotes: 0

Tor
Tor

Reputation: 784

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();

Upvotes: 1

Related Questions