email-organizer/offline-docs/alpinejs/directives/ref.md

Alpine.js Documentation - Directives

Alpine directives are attributes that you can add to HTML elements to give them special behavior.

x-ref

x-ref in combination with $refs is a useful utility for easily accessing DOM elements directly. It's most useful as a replacement for APIs like getElementById and querySelector.

<button @click="$refs.text.remove()">Remove Text</button>

<span x-ref="text">Hello 👋</span>

Hello 👋

Despite not being included in the above snippet, x-ref cannot be used if no parent element has x-data defined. → Read more about x-data

← x-ignore

x-cloak →

Code highlighting provided by Torchlight