How to remove an element after you do append()

Question

I am working with snap svg and I see in the docs that there is a way to append() and remove() the elements, but I don't have clear how to adapt it to my code

_placeBet = () => {
  const tipChipSnap = snap('#chip-bet');
  const tipChipSvgContent = Snap.parse(this.props.chipSelectedSvg.content);
  tipChipSnap.append(tipChipSvgContent);
}

The append() method is working as expected, all I need is to know how to use remove().

The reason why I need to remove the append it element, is because at some point I will have more than 100 elements of the same in the DOM and I want to avoid that. So lets say you do _placeBet() and then tipChipSnap.append(tipChipSvgContent); is fired appending a new element, I need that everytime a new element is added, delete the last one and just keep with the new one.

So, what are your recommendations ?

Answer 1

You can save the current saved element, so the next time the function is called, you remove it. Eg:

let previous;
_placeBet = () => {
  const tipChipSnap = snap('#chip-bet');
  const tipChipSvgContent = Snap.parse(this.props.chipSelectedSvg.content);
  tipChipSnap.append(tipChipSvgContent);

  if (previous) previous.remove();
  previous = tipChipSvgContent;
}