How do you approach Frontend: Event Delegation (closest() Walk)?

Walk up from startId by parentId, checking each node's classes.

What are common mistakes on Frontend: Event Delegation (closest() Walk)?

An incomplete dependency array, which pins the effect to a stale closure. Mutating state in place instead of replacing it, so no re-render is scheduled. Never cleaning up the timer, listener or subscription on unmount.

gitGood.dev

← Back to problems

Frontend: Event Delegation (closest() Walk)

MediumTypeScript

Description

> This problem is paper-only - see explanation for the canonical JS solution. Instead of attaching N click handlers to N buttons, attach one to a common ancestor and use `event.target.closest(selector)` to identify the actual clicked element. The auto-grader validates the closest() walk. Given a flat parent->child tree (`{ id, parentId | null, classes: string[] }` rows) and a starting node id, walk up via parent links and return the **first ancestor (or self) whose classes contain the target class**, or `null` if none. **For the auto-grader:** implement `findAncestor(nodes, startId, targetClass)`. Return the matching node id, or null.

Example 1

Input: nodes = [{id:"a",parentId:null,classes:["root"]},{id:"b",parentId:"a",classes:["item"]}], startId = "b", targetClass = "root"

Output: "a"

Example 2

Input: nodes = [{id:"a",parentId:null,classes:["root"]},{id:"b",parentId:"a",classes:["item","row"]}], startId = "b", targetClass = "row"

Output: "b"

Explanation: Self matches.

Example 3

Input: nodes = [{id:"a",parentId:null,classes:["x"]}], startId = "a", targetClass = "missing"

Output: null

Constraints

- 0 <= nodes.length <= 1000 - node ids are unique strings. - parentId references an existing node or is null. - Tree is acyclic (you can assume).

Frontend: Event Delegation (closest() Walk): approach, complexity and pitfalls

A medium frontend problem, graded against 5 test cases (2 of them hidden).

The pattern: Frontend

React and browser-platform problems - hooks, event handling, and rendering behaviour.

Reach for it when you see: A component, hook, or DOM-behaviour question rather than an algorithm.

More Frontendproblems →

If you are stuck

Show the 2-step hint ladder

Walk up from startId by parentId, checking each node's classes.
Build a Map<id, node> for O(1) parent lookups.

The optimal approach

Show the approach: Canonical browser code:

```tsx

function TodoList({ todos, onToggle }: { todos: Todo[]; onToggle: (id: string) => void }) {

function handleClick(e: React.MouseEvent) {

const target = (e.target as HTMLElement).closest<HTMLElement>("[data-todo-id]");

if (!target) return;

onToggle(target.dataset.todoId!);

}

return (

{todos.map(t => (

<li key={t.id} data-todo-id={t.id}>{t.label}</li>

))}

</ul>

);

}

```

Why event delegation wins:

- One listener instead of N. For a 10,000-row table, the saving is real - both memory and the cost of attaching/detaching on virtualized scroll.

- Newly-added children automatically participate - no need to re-bind.

- Pairs naturally with data attributes for IDs.

`closest(selector)` walks up the DOM tree (including the element itself) and returns the first ancestor matching `selector`, or null. This is exactly the algorithm you implemented for the auto-grader.

When NOT to delegate: for events that don't bubble (`focus`, `blur`, `mouseenter`, `mouseleave`, `load`). For those, use the bubbling alternatives (`focusin`, `focusout`, `mouseover`, `mouseout`) or attach per-element.

The full reference solution in every supported language stays in the editor above - reveal it there once you have had a real attempt.

What the tests check

Read off this problem's own test suite, so these are the cases a submission actually has to survive.

Empty input. At least one case passes an empty collection. Make sure your loop bounds and any "first element" read survive a length of zero.
Single element. A one-element case is included. Two-pointer and window solutions frequently return the wrong thing when the two indices start out equal.

Common Frontend mistakes

These apply to the pattern as a whole, not just this problem.

An incomplete dependency array, which pins the effect to a stale closure.
Mutating state in place instead of replacing it, so no re-render is scheduled.
Never cleaning up the timer, listener or subscription on unmount.