title: Keep original array of elements when using .remove()
body: <p>I have an array of delete button elements:</p>
  
  <pre><code>const DELETE_BUTTONS = document.getElementsByClassName('delete-button');
  </code></pre>
  
  <p>These delete buttons are in a table, and each of them are inside a table row in its own <code>td</code>. I add an event listener to it in three different ways.</p>
  
  <ol>
  <li><p>To already rendered delete buttons:</p>
  
  <pre><code>for (let x = 0; x &lt; DELETE_BUTTONS.length; x++) {
      DELETE_BUTTONS[x].onclick = function () {
          deleteProperty(DELETE_BUTTONS[x]);
      };
  }
  </code></pre></li>
  <li><p>To a new row in the table, which is an inline-form that I add with another <code>onclick</code>:</p>
  
  <pre><code>...
  CLONED.classList.add('cloned', 'properties__row');
  const DELETE_BUTTON = CLONED.lastElementChild.lastElementChild;
  DELETE_BUTTON.onclick = function () {
      deleteProperty(DELETE_BUTTON);
  };
  </code></pre></li>
  <li><p>When the user has submitted the inline form, I get the data back with Ajax, and create a new <code>tr</code> and append it to the table body. (To create this element easily I use another JS function. Note that I did not include the bit where I create the <code>tr</code> itself, it is irrelevant.) </p>
  
  <pre><code>MAKE_ELEMENT('a', {onclick: 'deleteProperty(this)', class: ['btn-flat', 'waves-effect', 'btn-floating']},
      MAKE_ELEMENT('i', ['material-icons', 'red-text'],
          'delete_forever'
      )
  )
  </code></pre></li>
  </ol>
  
  <p>This is the function that is added with the <code>onclick</code>:</p>
  
  <pre><code>function deleteProperty(element) {
      element.parentElement.parentElement.remove();
  }
  </code></pre>
  
  <p>This works perfectly, right up until I delete a second element. Every time I delete an element, it also removes it from the array. Meaning that <code>deleteProperty(DELETE_BUTTONS[19])</code> will delete/remove a different element than it did at first. How can I prevent the array from changing length?</p>
  
  <p>I tried to make a copy of the array, but it behaved exactly like the original. I could also just insert an empty place holder in the array when I remove an element so it stays the same length, but this doesn't seem like good practice. Any pointers would be welcome, thanks.</p>