readings.splice(index, 1);
persistAndDraw();
}
}
function persistAndDraw() {
localStorage.setItem('kestrel_readings', JSON.stringify(readings));
drawReadings();
}
// First paint after load
drawReadings();
</script>
</body>
</html>
What changed:
- Layout & CSS: Wrapped both buttons in a
.row-actionscontainer set todisplay: flex, so "Archive" and "Remove" sit side by side instead of stacking. Gave.remove-btnits own warm-red treatment so the destructive action reads differently at a glance. - HTML/Template: Extended the
drawReadingsmap so each row emits one more button:<button class="remove-btn" onclick="removeReading(${index})">Remove</button>. - JavaScript: Added the
removeReading(index)function. It puts a short confirm step in front of the delete so a stray click can't wipe an entry, drops the item from the array with.splice(), then writes the list back through your existingpersistAndDraw(). - Finished the unfinished block: Completed your original
addReading()function, which was cut off mid-statement atfield.value =.