title: Not sure if this is the correct place to ask this but can someone please help me understand the way the delete function is working here?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addExpense() {
      let itemName = document.getElementById('item').value;
      let priceOfItem = document.getElementById('price').value;
  
      let tr = document.createElement('tr');
  
      let td1 = tr.appendChild(document.createElement('td'));
      let td2 = tr.appendChild(document.createElement('td'));
      let td3 = tr.appendChild(document.createElement('td'));
  
      td1.innerHTML = itemName;
      td2.innerHTML = priceOfItem;
      td3.innerHTML = '&lt;input type="button" id="delete" value="delete" onclick="deleteExpense(this)"&gt;'
  
      document.getElementById('expense_table').appendChild(tr);
  }
  
  
  function deleteExpense(thing) {
      let deletion = thing.parentNode.parentNode;
      deletion.parentNode.removeChild(deletion);
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Hey so my understanding is that, after I add the button to a cell element, I call the delete function and pass 'this' (it's own object) as an argument, then in the delete function itself I keep an object parameter which and use the parentNode property which points towards the row and then the table? Am I on the right track?</p>
  <p>TLDR - I am not understanding how the below lines are functioning, tried looking it up but didn't find a proper answer</p>
  <pre><code>let deletion = thing.parentNode.parentNode;
  deletion.parentNode.removeChild(deletion);
  </code></pre>