Alpine.js x-destroy: Handle DOM element removal

by rameel

HTML

<div x-data="{ show: true, destroyed: false }">
  <button @click="show = false">Remove element</button>
  <button @click="show = true, destroyed = false">Reset</button>

  <p x-show="destroyed">
    Element destroyed
  </p>

  <template x-if="show">
    <p x-destroy="destroyed = true">
      Hello, World!
    </p>
  </template>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-destroy@1/alpinegear-destroy.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>