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-actions container set to display: flex, so "Archive" and "Remove" sit side by side instead of stacking. Gave .remove-btn its own warm-red treatment so the destructive action reads differently at a glance.
  • HTML/Template: Extended the drawReadings map 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 existing persistAndDraw().
  • Finished the unfinished block: Completed your original addReading() function, which was cut off mid-statement at field.value =.

Kestrel can get things wrong — double-check anything important.