2b:null 2c:["$","title",null,{"children":"Lists of items with add/delete buttons | Daniel Bachler | Observable"}] 31:[] 2f:{"id":"8c7833a8d3072ddb","slug":"lists-of-items-with-add-delete-buttons","title":"Lists of items with add/delete buttons","thumbnail":"65314605b29a32c5f8d3c8df56a79e4981491e27e710d7911ecd84ebd79d5516","access_level":"public","create_time":"$D2021-03-18T13:58:11.943Z","update_time":"$D2021-03-18T15:56:26.859Z","view_time":null,"first_public_time":"$D2021-03-18T15:54:11.017Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"06e54191865d69b8","login":"danyx","name":"Daniel Bachler","avatar_url":"https://avatars-next.observableusercontent.com/872b63ff84951b97aaf3e8a0ee3bacbeaed9371a037583c8df3968bc81211304","tier":"starter_2024"},"version":118,"publish_version":118,"role":null,"authored":false,"authors":[{"type":"individual","id":"439eeaf56f71bbf5","login":"danyx","name":"Daniel Bachler","avatar_url":"https://avatars-next.observableusercontent.com/872b63ff84951b97aaf3e8a0ee3bacbeaed9371a037583c8df3968bc81211304","tier":null}],"members":[{"type":"individual","id":"439eeaf56f71bbf5","login":"danyx","name":"Daniel Bachler","avatar_url":"https://avatars-next.observableusercontent.com/872b63ff84951b97aaf3e8a0ee3bacbeaed9371a037583c8df3968bc81211304","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Lists of items with add/delete buttons","cells":[{"id":0,"value":"md`# Lists of items with add/delete buttons\n\nThis notebooks shows a simple technique for maintaining lists of items with an input field and an add button and delete buttons on the items. \n\nThe need for this came from a notebook that needs a list of genes to then request data for those genes. Since there are over 20000 human genes just finding the genes you are interested in is an interesting problem for which it's nice to use an api - but then you are still left with the need to \"keep\" some of those genes in a list which you can then later use to make a request.\n\nAnyhow, below is the setup I came up with to maintain a mutable list of items, and have an add button to add new items and delete buttons to remove items\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"viewof newItemInput = Text()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"// The button has an onclick handler that mutates the target. Since\n// in this case the target is an array we make a copy, add the current newItemInput \n// value and set the items array to the new value\nupdate = {\n const button = html``;\n button.onclick = () => {\n let newItems = [...mutable items, newItemInput];\n mutable items = newItems;\n };\n return button;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"// Here we show a message that the list is empty or otherwise\n// return a ul tag with one nested li tag for each item\n// Each item gets an a tag with an onclick handler that\n// triggers setting items to a copy of items with the item at its index\n// filtered out.\n{ if (items.length === 0) {\n return html`

There are no items in the list

`\n }\n else {\n return html`

My name is ${gain}! \n (mutable items = items.filter(\n (item, filterindex) => filterindex != index\n ))}>🗑

\n`\n}\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"// The mutable items array. This is what you would use for further calculations\nmutable items = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"md`# Imports`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {Text} from \"@observablehq/inputs\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"import {html} from \"@observablehq/htl\"\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"