刪除附加的div

Question

我有一個輸入欄和一個按鈕的窗體。我想要按鈕單擊以將list div中的div添加到輸入字段中的內容中。然後，我想每當我點擊它們時刪除每個div。

我做了一個腳本，將它們添加到按鈕單擊，並應單擊該div時刪除它們。

$(document).ready(function() { 
 
    $('#button').click(function() { 
 
     var toAdd = $('input[name=checkListItem]').val(); 
 
     $('.list').append('<div class="item">' + toAdd + 
 
      '</div>'); 
 

 
    }); 
 

 
    $('.item').click(function() { 
 
     $(this).remove(); 
 
    }); 
 

 

 
});

h2 { 
 
    font-family:arial; 
 
} 
 
form { 
 
    display: inline-block; 
 
} 
 
#button { 
 
    display: inline-block; 
 
    height:20px; 
 
    width:70px; 
 
    background-color:#cc0000; 
 
    font-family:arial; 
 
    font-weight:bold; 
 
    color:#ffffff; 
 
    border-radius: 5px; 
 
    text-align:center; 
 
    margin-top:2px; 
 
} 
 
.list { 
 
    font-family:garamond; 
 
    color:#cc0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h2>To Do</h2> 
 

 
<form name="checkListForm"> 
 
    <input type="text" name="checkListItem" /> 
 
</form> 
 
<div id="button">Add!</div> 
 
<br/> 
 
<div class="list"></div>

的div是在點擊按鈕添加，但在點擊他們什麼也沒有發生。他們應該被刪除。

爲什麼附加的divs在點擊它們時不會被刪除？

Answer 1

因爲點擊只連接到DOM元素時，其通話，你應該做的像

$('body').on('click', '.item', function() { 
    $(this).remove(); 
}); 

Answer 2

東西，因爲他們不是在DOM當您選擇的元素添加事件監聽器。試試這個。

JSFiddle

JS

$(document).ready(function(){ 
    $('#button').click(function(){ 
     var toAdd = $('input[name=checkListItem]').val(); 
     $('<div class="item">' + toAdd + '</div>').click(function() { 
      $(this).remove(); 
     }).appendTo('.list'); 
    }); 
}); 

Answer 3

的$（ '項目'）使用選擇不匹配（最初）的任何標記，以便它不會做任何事情。您需要使用.on來要求jquery匹配未來的標籤。見http://jsfiddle.net/db8jX/2/

$(document).on('click', '.item', function() { 
     $(this).remove(); 
    }); 

Answer 4

這個問題已經被人回答了，但這裏是另一種解決方案，你可以用它來獲得附加div s到消失點擊：

$(document).ready(function(){ 
    $('#button').click(function(){ 
     var toAdd = $('input[name=checkListItem]').val(); 
     $('.list').append('<div class="item" onclick="$(this).remove()">' + toAdd + '</div>'); 
    }); 
}); 

Fiddle