CODEWITHSUNDEEP
jquerylistbuttonlistitem
dylosaur
dylosaur

Reputation: 149

How do you append text and a button to a list item with jQuery?

I'm trying to make a pretty simple to-do list. You type in something, it gets added to the list and stored in the local storage. My next step is adding a button next to each list item that I could then use to individually delete things as opposed to deleting the whole list. I've found a couple of SO questions about making buttons with jQuery and tried to follow them, but something isn't working right because I'm not getting the right output. Here's the code:

<!DOCTYPE html>
    <!--Project-->
    <html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
            <script>
                $(document).ready(function() {
                    let list = [];
                    if (localStorage.getItem("mylist") != null) {
                        let array = JSON.parse(localStorage.getItem("mylist"));
                        for (let element of array) {
                            list.push(element);
                            $('#list').append('<li>' + element + '</li>');
                        }
                    }
                    $('button').click(function() {
                        if ((this.id) == "add") {
                            let input = $('#input').val();
                          
                            // making button?
                            let button = $('<button/>', {type:'button', id:input, text:'Delete'});
                            
                            // appending text and button?
                            $('#list').append('<li>' + input + button + '</li>');
                          
                            list.push(input);
                            let json = JSON.stringify(list);
                            localStorage.setItem("mylist", json);
                            $('#input').val('');
                        }
                        else {
                            localStorage.clear();
                            $("#list").empty();
                        }
                        event.preventDefault();
                    });
                });
            </script>
        </head>
        <body>
            <form>
                <input type="text" id="input" placeholder="Enter tasks...">
                <button id="add">Add</button>
                <button id="delete">Delete All</button>
                <br>
                <ul id="list">
                </ul>
              
            </form>
        </body>
    </html>

For some reason, I'm just getting the text from the input box and [object Object] next to that. I'm not really sure what to do as I'm having trouble finding documentation on how to create elements in this way using jQuery. I'm trying to create a button that has an ID that matches the text that was put into the text box, that way I can later reference that ID and use it to delete stuff. Maybe there's another way I should be going about this? Any help is appreciated.

Upvotes: 2

Views: 1665

Answers (1)

Vitox
Vitox

Reputation: 4424

You are getting [object Object] next to that, because you are concatenating a OBJECT, and not a string (or a string with the html code of your button, as expected).

// Here you are actually creating correctly the button
// making button?
let button = $('<button/>', {type:'button', id:input, text:'Delete'});

// BUT HERE you're passing the button concatenated with the string `input`. That won't work.
// appending text and button?
$('#list').append('<li>' + input + button + '</li>');

That's equivalent to the following:

$('#list').append('<li>' + 'any text' + $('<button>') + '</li>');

As you can see, you are NOT concatenating the html code of your new button, but instead you are concatenating a DOM element (actually a jQuery object, but still...). When you try to concatenate a a string with a object, javascript tries to convert the object to a string that represents that object. The result of this conversion on this case is '[object Object]'.

Solution:

Just change the button that is the object, to its html code. You can simply do that with outerHTML property of DOM Elements. Since your button object is a jQuery object, and jQuery objects are treated as collections, you need to get the first object in this collection with [0], and only then call the outerHTML property, since it only works (at least as expected) with standard javascript objects.

// appending text and button?
$('#list').append('<li>' + input + button[0].outerHTML + '</li>');

Upvotes: 1

Related Questions