Пытается удалить определенные элементы с помощью jquery

Я не могу понять, как удалить элемент с помощью jQuery. Я создаю примерное приложение списка покупок, и я могу добавлять элементы по мере необходимости, но я не могу понять, как удалить отмеченные элементы. Что мне не хватает?Пытается удалить определенные элементы с помощью jquery

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

}); 
});

Вот мой 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>

источник

2013-08-14 Aditya Gorti

'вар checkedstuff = $ (это) .closest ('# outsideBox') найти ('checkDone. ') Есть.. (': Проверено'),' будет возвращать ' bool', так как '.is()' возвращает либо true, либо false – Dom

Изменение '' '' 'filter' и нацеливание на правый элемент, вот что-то« работает »: http://jsfiddle.net/hsPgs/. Обратите внимание, что '$ (this) .closest ('# outsideBox')' не нужно (и заставляет jQuery выполнять гораздо больше работы, чем необходимо) - вы можете просто использовать '$ (" # outsideBox ")', потому что атрибуты id быть уникальным – Ian

Is() возвращает логическое значение. Вы можете использовать селектор: checked. Затем используйте parent() для удаления всего родителя элемента покупки. Смотрите эту скрипку: http://jsfiddle.net/MKPcK/

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

источник

2013-08-14 21:41:46 Tor

Да, это сработало. Я подумал, что это должно быть что-то простое, что я пропал без вести. Благодаря! –

Просто имейте в виду, что hide() установит только элемент «display: none» на элементе, скрывая его, но он все еще занимает память, он все равно будет присутствовать в DOM, поэтому, если вы хотите, чтобы они были удалены (освобождение пространство памяти также), вместо этого используйте remove(). –

Хорошая точка Николае. Используйте hide() только в том случае, если вы хотите показать() потом или иначе использовать скрытые данные. – Tor

Try:

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

источник

2013-08-14 21:39:11

Пытается удалить определенные элементы с помощью jquery

ответ

Смежные вопросы