Mastering Manipulations 10-14. Does't creating new element


#1

When I click on button, it does not creating div elements. Where I was wrong?

index.html

<!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>
        <button id="button">Add!</button>
        <br/>
        <div class="list"></div>
    </body>
</html>

script.js

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

#2

Hi,

You are not going to see a change in your code, You will just see it in preview.
Add another paragraph or element to your HTML and then use jQuery to add more and you will see all displayed.


#3

I can't see how code work in browser. When I click on button it should add my entered text in the list and I have to see it in browser. Then I should click on text list item and it should be removed. Is'n it?. As I understand the task right.


#4

Yes that's what it does,

I copied your code over and tested works perfect !


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.