How can I remove an event listener when a small widget is no longer needed?

Keep the callback function itself—not just the code it contains—and keep track of the target and event type. Follow the removal rules documented for your event target: the Google IMA reference specifies matching the event type, callback, and options [S1]. The Maps place-widget reference documents add and remove methods on its widget elements and describes removal as removing a listener previously registered on that target [S2].

A paired example looks like this:

const button = document.querySelector("[data-widget-button]");
const handleClick = () => {
  console.log("Widget action");
};
const options = { capture: false };

button.addEventListener("click", handleClick, options);

function stopWidget() {
  button.removeEventListener("click", handleClick, options);
}

Here, handleClick is a reusable reference. Writing a new arrow function inside removeEventListener would create a different function, even if its body looked identical. This example illustrates the pattern; confirm the applicable removal rules for the event target your widget uses.

Matching the function’s text is not the same as reusing the function object. For example, this pair creates two separate callbacks:

button.addEventListener("click", () => doSomething());
button.removeEventListener("click", () => doSomething());

Instead, assign the callback once and use that variable for both calls. The IMA reference identifies the callback as the function invoked when the event is dispatched and specifies a matching callback for removal [S1]. If the widget creates several listeners, store each callback separately so cleanup can remove the intended one.

Treat listener cleanup and element cleanup as separate tasks. Remove the registered listener from its target according to that target’s documented rules for event type, callback, and options. Then handle the element itself using the approach appropriate to your application. Removing a listener removes a registration; it does not, by itself, mean the widget element has been removed.

Do not assume every event target has identical rules. The IMA reference discusses capture and other options for its interface [S1], while the Maps reference covers its place-widget elements [S2]. These sources do not establish a complete rulebook for every browser DOM target, framework, or third-party widget. Check the documentation for the target you use, especially if you registered with non-default options. When practical, keep the options in a variable so you can pass them consistently.

Keep initialization and cleanup close together, and make cleanup explicit. Assuming your target supports the matching add/remove pattern shown above:

function startWidget(button) {
  const handleClick = () => {
    // Perform the widget action.
  };
  const options = { capture: false };

  button.addEventListener("click", handleClick, options);

  return function stopWidget() {
    button.removeEventListener("click", handleClick, options);
  };
}

const stop = startWidget(button);
// When this widget instance is no longer needed:
stop();

The returned cleanup function closes over the callback and options used during setup. If the widget also creates timers, subscriptions, or other resources, track and clean those up separately; this example only addresses the event listener. The cited references support their respective event-target interfaces, not every possible widget lifecycle.