Delete an element from an array while retaining the event listener

Question

Delete an element from an array while retaining the event listener

I'm facing a challenge with an array of items that have the same event listener attached to them. I need to remove a specific item from the array while preserving the event listener on it.

Adding the event listener separately is an option, but I was hoping for a more streamlined solution.

Check out this pen for a demonstration. The code snippet in question fails to remove focus from the third button as intended.

To provide further clarity, here is the relevant JavaScript code:

const buttons = [...document.querySelectorAll(".button")];
let dropButton;

for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", function () {
        setTimeout(() => { buttons[i].blur(); }, 500);
    });
    
    if(buttons[i].classList.contains("drop")) {
        dropButton = buttons.splice(i, 1);
        i--;
    }
}

Your assistance is greatly appreciated :)

javascript arrays event-listener

Answer 1

Answer №1

Even though the event listener remains connected, there is an issue with the handler when the "dropped" button is pressed. The problem arises from the handler attempting to blur the incorrect button because it references buttons[i] using an outdated index.

Here are three alternative solutions for your handler:

// Declaring the button as a constant within a closure scope
const b = buttons[i];
buttons[i].addEventListener("click", function () {
  setTimeout(() => {b.blur();}, 500);
})

or

// Utilizing the "this" context in the handler to target the button
buttons[i].addEventListener("click", function () {
  setTimeout(() => { this.blur();}, 500);
})

or

// Accessing the button through the event object's "target" key in the handler
buttons[i].addEventListener("click", function (event) {
   setTimeout(() => {event.target.blur();}, 500);
})

Answer 2

Even though the event listener remains connected, there is an issue with the handler when the "dropped" button is pressed. The problem arises from the handler attempting to blur the incorrect button because it references buttons[i] using an outdated index.

Here are three alternative solutions for your handler:

// Declaring the button as a constant within a closure scope
const b = buttons[i];
buttons[i].addEventListener("click", function () {
  setTimeout(() => {b.blur();}, 500);
})

or

// Utilizing the "this" context in the handler to target the button
buttons[i].addEventListener("click", function () {
  setTimeout(() => { this.blur();}, 500);
})

or

// Accessing the button through the event object's "target" key in the handler
buttons[i].addEventListener("click", function (event) {
   setTimeout(() => {event.target.blur();}, 500);
})

Delete an element from an array while retaining the event listener

Answer №1

Similar questions

Exploring numerous choices within a multi-select "category" search bar (web scraping)

Unable to modify information retrieved from API. Error: Unable to assign to property that is set to read-only

Switch modules based on user options

Display a PDF in a <div> when the menu is clicked

Sending a 2-dimensional array from JavaScript to the server using AJAX

Different ways to pass a component as a prop and display it based on certain conditions?

Make Vuetify icons display properly while loading a page from the local filesystem

I find arrays to be quite challenging and often encounter difficulties in

Using caret range and package-lock.json to acquire the most recent non-disruptive versions

Executing multiple asynchronous function calls within a for loop using JavaScript

Challenges with adding the current date into a WebSQL database using JavaScript in WebSQL

Form a triangle in order to prevent the inner content from spilling out

Javascript has ceased functioning on the current server, however it is operational on a different

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

Is there a way to pass attributes to BufferGeometry in THREE.js without using ShaderMaterial?

Include a hyperlink beside the title of a section

Error message: "Angular 2 queryParams is causing a 'does not exist on type' issue"

How can I transform a string into hexadecimal in Lua?

Conceal Backup Image for Computer Viewing

Implementing ui-sref-active for intricate routing states