1

That is, with jQuery, I want to remove the div with an event listener on that div. It seems to work but it gives me that sinking feeling of pulling the rug out from under myself. Here is the fiddle and the code below.

The suggestion that this is a dup question does not apply. I'm not asking just about removing listeners, I'm asking about querying for an element and then removing that element in a conditional of that query.

https://jsfiddle.net/pkellner99/wtkv7f31/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Title</title>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>

<body>
  <script type="application/javascript">
    $("body").prepend(
      `<div id="someguidid">
           <img src="https://apod.nasa.gov/apod/image/1904/FairbairnCROSSTOCARINA.jpg"/>
         </div>
        `
    );
    $("#someguidid").click(function() {
      $("#someguidid").remove("#someguidid");
    });
  </script>
</body>

</html>
Peter Kellner
  • 14,748
  • 25
  • 102
  • 188
  • Possible duplicate of [Do I need to remove event listeners before removing elements?](https://stackoverflow.com/questions/6033821/do-i-need-to-remove-event-listeners-before-removing-elements) – Herohtar Jun 24 '19 at 01:35
  • Also related: [If a DOM Element is removed, are its listeners also removed from memory?](https://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory) – Herohtar Jun 24 '19 at 01:36
  • @Herohtar, this post implies yes I do (with the caveot that the browser handles bad code). An answer posted below posted an answer saying what I did is "perfectly fine". Thoughts? – Peter Kellner Jun 24 '19 at 01:40
  • If you read more and other answers you will see that it is mostly older browsers that have issues. If you aren't supporting older browsers on your site it's not really a problem because modern browsers take care of it. – Herohtar Jun 24 '19 at 01:41
  • What might the correct code be in one of the bad browsers to do this correctly? it was not obvious to me in those posts. They had a lot of code. – Peter Kellner Jun 24 '19 at 01:48
  • 1
    Simply [remove any event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) before removing the elements. – Herohtar Jun 24 '19 at 01:58

1 Answers1

1

Yes, that's perfectly fine. After it gets removed, the element won't be in the document anymore, which means that the event listener will get garbage collected - nothing wrong with that.

Since you're removing the jQuery collection of #someguidid, there's no need to pass an additional selector to .remove - just call .remove() on the collection:

$("body").prepend(
  `<div id="someguidid">
     <img src="https://apod.nasa.gov/apod/image/1904/FairbairnCROSSTOCARINA.jpg"/>
   </div>`
);
const $elm = $("#someguidid")
$elm.click(function() {
  $elm.remove();
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • The comment above references a post that says "it's not such a good idea". https://stackoverflow.com/questions/12528049/if-a-dom-element-is-removed-are-its-listeners-also-removed-from-memory I prefer your answer but this is for an article I'm writing and don't want to be laughed at by my peers. – Peter Kellner Jun 24 '19 at 01:41
  • 2
    The answer you're linking was written in 2012, and even then, it was warning about even older versions of IE, which aren't being used anymore. Nowadays, many are even considering dropping support for IE11 (the last version of IE, 2013). I don't think worrying about prior IE versions is a productive use of time - *many* things used nowadays do not work on obsolete browsers. For 2019, I would consider the situation of someone using IE8 to be a bug with *their* system, rather than yours :P – CertainPerformance Jun 24 '19 at 01:48