d3 draw once on mouseover

Question

Im using using d3js to create a list of buttons - which i am able to do successfully.

I am trying to add an X (close) button when you hover over the button. The x appears, however, inspecting the DOM, the x element is drawn endless amounts of times.

btnArray.forEach(function (button) {

    const btn = document.createElement('div');
    btn.type = 'button';
    btn.value = button.name;
    btn.onClick = evt => {
        // do soemthing on click
    }

    btn.onmouseover = function(e) {
        var me = d3.select(btn);
        me.append('div')
            .classed({'btn-close': true})
            .text('x');
    }

    btn.onmouseout = function(e) {
        var me = d3.select(btn);
        me.selectAll('btn-close')
            .remove();
    }

});

Answer 1

The reason that you're seeing the "X" endless times is because the element is being appended at every mouseover but it is not being removed. This is why:

You are setting a class...

.classed({'btn-close': true})

But you're not selecting by class:

me.selectAll('btn-close')

It should be:

me.selectAll('.btn-close')
//class here--^

PS: This is out of the scope of your question, but I'd like to make some considerations about your code. Please take this as a constructive criticism, so you can write a more idiomatic D3:

1. You don't need loops for appending elements in a D3 code. Use selections . An idiomatic D3 code has very few loops, if any.
2. Use D3 methods for manipulating the DOM. There is no problem with document.createElement('div') (by the way, you're missing the appendChild ), but you could do that using D3 methods.
3. Instead of removing and appending the same element, you could change its opacity, or the display.