[Solved]-How to remove event listener of an element when I remove the corresponding element in the midst of the event being triggered in D3?-d3.js

this is an interesting question, although i have to admit, that i have never come across this problem in a real world application. the reason why this happens is to be found in the inner workings of d3's drag implementation.

first, it is worth mentioning, that, if you remove an element from the dom tree, it can no longer become a target when performing hit-testing for a pointer event. thus, no event listener registered on that element will be executed any more. this is the behavior one would expect and it is the reason for your confusion, because in your jsfiddle the listener seems to executed even though the element was successfully removed.

to understand what is going on, you have to dig into the source code of d3.drag(). on initialization the drag behavior registers various event handlers on the selection's elements:

function drag(selection) {
  selection
      .on("mousedown.drag", mousedowned)
  //...
}

this handler listening for mousedown events will not set up the rest of the drag behavior before such an event is fired on the respective element. once an element of the drag behavior receives a mousedown event, the internal mousedowned() handler will be executed:

function mousedowned() {
  //...
  select(event.view).on("mousemove.drag", mousemoved, true).on("mouseup.drag", mouseupped, true);
  //...
}

within this handler a "mousemove.drag" and a "mouseup.drag" listeners are registered on event.view. this view property of the mouseevent is inherited from the uievent interface and—at least in browsers—points to the window object the event happened in. those drag handlers on the global window are used by d3-drag to do its work. and those handlers are responsible for the seemingly confusing behavior you witnessed. we will come to this soon, first let us check how the listeners are subsequently removed.

when the drag gesture eventually ends by firing a mouseup event, those handlers are removed from the window object in the function mouseupped():

function mouseupped() {
  select(event.view).on("mousemove.drag mouseup.drag", null);
}

now, let us have another look at your code. even though you removed the target for the drag behavior triggered by a keydown event, the aforementioned handlers on the window still exist because you are keeping the mouse button pressed whereby suppressing a mouseup event to be fired. hence, the mouseupped() handler has not yet been executed. this will keep the drag behavior alive as mousemove events are still captured by the drag's internal handlers on window. additionally, those internal handlers will also keep delegating to your own dragged handler causing the console output you are witnessing.

as mentioned at the very beginning of this post, i have never seen this causing any real world trouble. if you nonetheless want to avoid this behavior you could remove the internal handlers once you remove the target:

d3.select(window).on("keydown", function() {
    d3.select(".draggable-rect").remove();
    d3.select(d3.event.view)          // remove global (internal) drag handlers 
      .on("mousemove.drag", null)
      .on("mouseup.drag", null);
})

as is always the case when it comes to fiddling with the inner workings of some library, you have to be cautious not to break other things and to keep in mind that this is in danger of breaking silently with any future release of d3.

have a look at this working demo:

d3.select("svg").append('rect').attr('class', 'draggable-rect');
                               
d3.select(window).on("keydown", function() {
	d3.select(".draggable-rect").remove();
  d3.select(d3.event.view)
    .on("mousemove.drag", null)
    .on("mouseup.drag", null);
})

d3.select(".draggable-rect")
  .call(d3.drag().on("start", dragstarted)
  					 		 .on("drag", dragged)
      	     		 .on("end", dragended));

function dragstarted(d) {
  d3.select(this).raise().classed("active", true);
}

function dragged(d) {
	console.log("dragging")
  d3.select(this).attr("x", d3.event.x - 40).attr("y", d3.event.y - 40);
}

function dragended(d) {
  d3.select(this).classed("active", false);
}

.test-area {
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

svg {
  width: 400px;
  height: 400px;
}

.draggable-rect {
  width: 80px;
  height: 80px;
  fill: green;
}

<script src="https://d3js.org/d3.v4.js"></script>
<div class="test-area">
  <svg>
  </svg>
</div>