diff --git a/packages/playwright-core/src/server/injected/recorder.ts b/packages/playwright-core/src/server/injected/recorder.ts
index 217ecb7027..e26c01eb90 100644
--- a/packages/playwright-core/src/server/injected/recorder.ts
+++ b/packages/playwright-core/src/server/injected/recorder.ts
@@ -249,8 +249,9 @@ export class Recorder {
   }
 
   private _updateModelForHoveredElement() {
-    if (!this._hoveredElement) {
+    if (!this._hoveredElement || !this._hoveredElement.isConnected) {
       this._hoveredModel = null;
+      this._hoveredElement = null;
       this._updateHighlight();
       return;
     }
diff --git a/tests/library/inspector/cli-codegen-2.spec.ts b/tests/library/inspector/cli-codegen-2.spec.ts
index 47aff40d2f..dcd27816fe 100644
--- a/tests/library/inspector/cli-codegen-2.spec.ts
+++ b/tests/library/inspector/cli-codegen-2.spec.ts
@@ -439,6 +439,17 @@ test.describe('cli codegen', () => {
     expect(models.hovered).toBe('#checkbox');
   });
 
+  test('should reset hover model on action when element detaches', async ({ page, openRecorder }) => {
+    const recorder = await openRecorder();
+
+    await recorder.setContentAndWait(`<input id="checkbox" onclick="document.getElementById('checkbox').remove()">`);
+    const [models] = await Promise.all([
+      recorder.waitForActionPerformed(),
+      page.click('input')
+    ]);
+    expect(models.hovered).toBe(null);
+  });
+
   test('should update active model on action', async ({ page, openRecorder, browserName, headless }) => {
     test.fixme(browserName === 'webkit');