Кнопка удаления JS RAILS API

Question

У меня есть RAILS API с интерфейсом JavaScript vanilla. Я пытаюсь создать кнопку удаления, чтобы стереть содержимое. Я застреваю на этом, представляя запрос. При необходимости я могу поделиться хранилищем.

Я просто пытаюсь, чтобы кнопка удаления, отображаемая при вставке новой карты содержимого, удаляла саму запись. Я не могу понять это.

Мир JavaScript для отображения кнопки при создании предмета.

display() {

  // display post details in a card in the post-lists   
  let deleteBtn = document.createElement('button')
  deleteBtn.setAttribute('class', 'delete-world-btn')
  deleteBtn.innerText = 'Remove'
  deleteBtn.addEventListener('click', event => this.deleteWorld(event, this))
  document.getElementsByClassName("character-lists")[0].innerHTML += this.template();
}

deleteWorlds() {
  event.preventDefault()
  fetch(`${deleteUrl}/${this.id}`, {
    method: "DELETE"
  }).then(() => { 
    document.getElementById(`${this.id}`).remove()
    World.all = World.all.filter(world => world.id !== this.id)
  })
}

Index.js - DOM

function addClickEventToPostListHeader() {
  document.querySelector('.character-lists h3').addEventListener('click', changeColor);
}

function addSubmitEventToForm() {
  document.getElementById("character-form").addEventListener('submit', Api.submitWorld);
}

document.addEventListener('DOMContentLoaded', function () {
  // We have access to all of the DOM elements
  addSubmitEventToForm();
  Api.getWorlds();
});

<div class="input-field">
  <input type="text" name="planet" id="planet">
  <label for="planet">Where is your home planet?</label>
</div>
<label for="content">Home Planet Information</label>
<div class="input-field">
  <textarea name="content" id="content" cols="30" rows="50"></textarea>
</div>
<input type="submit" value="Create Character" class="btn">
</div>

Я бы на самом деле просто хотел быкнопка удаления, чтобы удалить отдельные записи контента.