2013-03-02 79 views
2

我正在嘗試創建一個交互式待辦事項列表,其中我在文本框中輸入文本,單擊按鈕並添加下方的項目。到目前爲止,我已經成功地使用按鈕將項目添加到我的列表中,但是無法通過單擊它來一次刪除一個項目,這是我希望能夠做到的。 (理想情況下,每個項目旁邊都會有一個複選框,當我點擊該項目時會消失)。到目前爲止,使用.remove()動作,我只能通過單擊使列表中的所有項目都消失。我做了一些研究,並認爲.on()行動可能是我需要的。我試過了,現在我無法讓物品消失。這是我的代碼:可移動清單項目

$(document).ready(function() { 
    $('#button').click(function() { 
     var toAdd=$('input[name=checkListItem]').val(); 
     $('#item').append.('.list'); 
    }); 
    $(document).on('click','item',function() { 
     $(this).remove(); 
    }); 
}); 

有沒有什麼突出的不正確?或者有更好的方法去解決這個問題嗎?我是全新的,並欣賞任何和所有feedback.Thank你!

+1

我們展示你的HTML代碼。或者更好的,在www.jsfiddle.net上製作一個JsFiddle並在這裏分享。 – 2013-03-02 01:05:07

+0

我發現一個錯字,並將'item'改爲'.item',現在它使我列表中的所有項目消失,而不僅僅是我點擊的項目。在此之後,它也不會讓我添加任何其他內容到我的列表中。對不起所有的閱讀! – user2125606 2013-03-02 01:07:10

+0

我會去JsFiddle和分享我得到的 – user2125606 2013-03-02 01:07:38

回答

1

我分叉的小提琴,以糾正代碼:http://jsfiddle.net/XEDHJ/2/

這裏就是你遇到麻煩:

$('.list').on('click','input',function() { 
    $(this).parent().remove(); 
}); 

使用on是正確的想法,很適合這種情況。你使用on的方式是你有一個父節點,在這種情況下是一個list類的div和一些匹配的child nodes,在這種情況下,你的父節點下面是input的任何元素。子節點由第二個參數中的選擇器表示。這將匹配div下的任何輸入節點,即使它們是在頁面呈現後創建的。

因爲我用<div>標記封裝了輸入,所以我們實際上想要移除該父項<div>。所以我們叫$(this).parent().remove()

我在下面留下了我原來的例子,但這應該足以讓你走。


它看起來像這樣的事情是你在找什麼:

小提琴

http://jsfiddle.net/Khesy/

的JavaScript

$(document).ready(function() { 
    $('#button').click(function() { 
     $('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>"); 
    }); 
    $('#item').on('click','input',function() { 
     $(this).parent().remove(); 
    }); 
}); 

HTML

<input id="button" type="button" value="Add Item"></input> 
<div id="item"> 
</div> 
+0

現在發生了什麼是,當我點擊文本框,它只是添加一個名爲「待辦事項」的列表項旁邊的複選框。當我點擊一個複選框時,它將刪除最後一個項目,而不是我檢查的項目。這是我的新代碼:http:// jsfiddle。net/LC7bH/6/ – user2125606 2013-03-02 01:27:14

+0

試試我的回答頂部的小提琴 – lmortenson 2013-03-02 01:28:31

+0

非常感謝!這真的有幫助。這只是我的第二天,我不知道我在做什麼! – user2125606 2013-03-02 01:37:04