Delete items with keyboard, update focus display

HTML

<p>
  Use up/down keyboard arrows to navigate the focusgroup. Press Enter/Space on an item to delete it. Notice that focus is lost. There should be an easy way to preserve the focus within the list upon deletion.
</p>

<div class="tracker">
  <span>Currently focused:</span>
  <span id="focused"></span>
</div>

<div focusgroup="listbox block" class="list">
  <button>Item 1</button>
  <button>Item 2</button>
  <button>Item 3</button>
  <button>Item 4</button>
</div>

CSS

.list { 
  display: flex; 
  flex-direction: column;
  gap: 8px; 
  margin-bottom: 20px; 
  padding: 15px; 
  background: #f0f0f0; 
  
  button {
    padding: 8px 16px;
    cursor: pointer;
  }

  button:focus {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }
  
  .tracker {    
    padding: 15px;
    background: #222; 
    color: white; 
    border-radius: 6px;
    font-family: monospace;
  }
  
  .focus-lost { color: #ff5252; font-weight: bold; }
  .focus-active { color: #69f0ae; font-weight: bold; }

JavaScript

document.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', () => {
      btn.remove();
    });
  });

  function updateFocusText() {
    const focused = document.querySelector('#focused');
    const active = document.activeElement;
    
    if (active === document.body) {
      focused.textContent = "BODY";
    } else {
      focused.textContent = `<${active.tagName.toLowerCase()}> ${active.textContent}`;
    }
  }

  setInterval(updateFocusText, 100);