Home/ Questions/Q 6129455
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T16:44:41+00:00

I am creating a web app where I allow the user to manipulate some

  • 0

I am creating a web app where I allow the user to manipulate some data held in Javascript array. Its easy enough to generate a series of divs or an HTML list to represent the array (simply iterating through and adding the HTML) but I also want each array element to have a ‘delete’ button in the HTML that removes the corresponding Javascript array element and then update the HTML list.

To clarify the list would look something like this to the user:

Item 1 (Delete)
Item 2 (Delete)

Ideally I would like the ‘Delete’ link to, when clicked, call a Javascript method with the item index (‘remove_item(index)’ for example).

I have thought of a couple of awkward ways of doing this but I feel this is something that must have been done before and wondered if anyone had a sturdy, fast solution to this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Grab the inner HTML of the sibling of the delete button, then look for that value in the array. Then remove it, and remove the parent of the delete button from the DOM.

    http://api.jquery.com/siblings/

    http://api.jquery.com/parent/

    <html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            for (var i=0; i<10; i++){
                var $div = $('<div id="myDiv' + i + '"></div>');
                $span=$("<span>" + i + "</span>");
                $button=$('<button type="button" id="button-' + i + '">Delete Me!</button>');
                $button.click(function(){
                    var id = this.id.split("-")[1];
                    $("#myDiv" + id).remove();
                });
                $div.append($span);
                $div.append($button);
                $("#wrapper").append($div)
            }
        });
    </script>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>
    • 0