We used the hx-target attribute to tell htmx where to put the response of the request.

This attribute takes a CSS selector, which is what you’re likely familiar to use in CSS to target an element, for example by id or class.

In our example we had hx-target="#result".

That put the result of the request to the element with the id attribute equal to result

(As a reminder, the difference between id and class is that id attributes must be unique on a page, while class can be repeated multiple times, so you have to handle that case)

This is the simplest usage of hx-target.

You can use hx-target="this" to target “this element we are defining the xh-target attribute on”.

Then we can navigate the HTML elements around or near us with:

• closest <CSS selector> to find the closest parent that matches the CSS selector
• next <CSS selector> to find the closest next element that matches the CSS selector
• previous <CSS selector> to find the closest previous element that matches the CSS selector
• find <CSS selector> to find the closest child that matches the CSS selector

For example in a project I used hx-target="closest li" in a list with a delete button to delete the entire li (list item) when I clicked the delete button to delete the item.

Lessons in this unit: