Задача: Брать данные из формы при клике и размещать слова один за другим внизу формы внутри
Нужно еще при клике на добавленное слово, оно пропадало, и так один за другим. Это своего рода todo list, добавил задачку, что не нужно, удалил со списка.
Застрял на этом месте. Скрипт не видит класс item и не делает fadeOut
$(document).ready(function() {
$('#button').click(function() {
$('.list').append('<p class="item">item</p>');
});
$(".item").click(function() {
$(this).fadeOut( "slow" );
});
});
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
