Как в alpine js удалить элемент?

Question

[maragon]

Как при клике удалить элемент в alpine js? (Не скрыть со страницы, а именно удалить)

Answer 1

[0xD34F]

Очевидно, внести соответствующие изменения в данные, связанные с отображением элемента.

Например.

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.3.4/cdn.min.js"></script>

<div x-data="{
  items: [
    { id:  69, text:  'hello, world!!' },
    { id: 187, text:  'fuck the world' },
    { id: 666, text: 'fuck everything' },
  ],
}">
  <template x-for="(n, i) in items">
    <div>
      <span x-text="n.text"></span>
      <button @click="items.splice(i, 1)">x</button>
    </div>
  </template>
</div>

https://jsfiddle.net/96ksgtdo/