blob: f4d91dda95f3a2c5d7cbedc891467f8f4fc52b1d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
---
order: 11
title: ref
---
# `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`.
```alpine
<button @click="$refs.text.remove()">Remove Text</button>
<span x-ref="text">Hello 👋</span>
```
<!-- START_VERBATIM -->
<div class="demo">
<div x-data>
<button @click="$refs.text.remove()">Remove Text</button>
<div class="pt-4" x-ref="text">Hello 👋</div>
</div>
</div>
<!-- END_VERBATIM -->
|
