How to replace/remove SVG-Elements by using EventListener

Hi there,

im trying to figure out how to replace/remove svg-elements instead of creating new ones while using an eventListener.

when i move the slider handle to the right, it also moves the line. But for every step it creates new lines without removing the lines which were created before (i only want 1 line on my graph based on the slider handles position)

The start position was 50. i moved it to about 65:

I tried removing the child-elements by using:

d3.select("this.absline.parent").selectAll("*").remove();

but this didnt worked for me.

is there a index-value that i can access to remove all lines except for the newest one?

Or does somebody have a better solution for this?

here is my code:

// mySlider: HTML Range-Slider Element
this.mySlider.addEventListener("mousemove", (event) => { 
        this.getx = parseInt((event.target as HTMLInputElement).value); // getx: number (gets the value based on the sliders handle position)

        var rot = 1; // used to rotate the line

        // SVG Line-Element
        var absline = this.g
		.append('g')
		.append('rect')
                .classed('bar', true)
		.attr("x", absx(this.getx)) // Position on the x-axis based on the "absx"-Scale
		.attr("width", 2)
                .attr("y", absy(d3.max(dat, function (d) { return d.counter })))
		.attr("height", gHeight)
		.attr("transform", "rotate(" + rot + "," + absx(this.getx) + "," + absy(d3.max(dat, function (d) { return d.counter })) + ")");
		
});