{{define "body"}} <ul id="later-recipes"> {{range .Recipes}} <li> <a href="/recipes/{{.RecipeId}}">{{ .Preview }}</a> <button class="remove-later-recipe" data-id="{{.Id}}" data-preview="{{ .Preview }}">Remove</button> </li> {{else}} <li><strong>No recipes saved for later</strong></li> {{end}} </ul> <form method="post" action="/later_notes"> <a href="/recipes_for_later">cancel</a> <textarea name="notes">{{.Notes}}</textarea> <input type="submit" value="Save"> </form> <div id='edit-error'></div> <script> document.getElementById('later-recipes').addEventListener('click', function(e) { const tgt = e.target if (tgt.nodeName !== 'BUTTON') { return true } const dt = tgt.dataset console.log(e.target) if (!confirm(`Are you sure you want to remove "${dt.preview}" from list of saved recipes?`)) { return } fetch(`/recipes/${dt.id}/later`, {method: 'DELETE'}).catch((a) => { document.getElementById('edit-error').textContent='could not edit later recipes' console.log('could not edit later recipes', a) }).then(function() { window.location.reload() }) }) </script> {{end}}