title: Javascript: Delete a specific table cell when it is clicked
body: <p>I was working on a university project. They told us to make 2 arrays. The first will have 3 cells with 3 images, and the second will be empty with 1 row.</p>
  
  <p>I need to remove the image from the cell clicked each time in the first table and copy it to the second table!</p>
  
  <p>My problem is that <code>deleteCell()</code> function will only delete the first element each time. I don't know how to delete the <strong>CLICKED</strong> cells from my table row!</p>
  
  <p>My JS:</p>
  
  <pre><code>var table1 = document.getElementById("myTable");
  var table2 = document.getElementById("myTable2");
  
  function DL1() {
  
    var row = document.getElementById("myRow1");
    row.deleteCell();
  }
  
  function CR2() {
    var row = document.getElementById("myRow2");
  
  }
  </code></pre>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;table id="myTable" class="auto-style1"&gt;
    &lt;tr id="myRow1"&gt;
      &lt;td onclick="DL1()"&gt;&lt;img src="../../2.jpg" /&gt;&lt;/td&gt;
      &lt;td onclick="DL1()"&gt;&lt;img src="../../1.gif" /&gt;&lt;/td&gt;
      &lt;td onclick="DL1()"&gt;&lt;img src="../../3.png" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;table id="my2Table"&gt;
    &lt;tr id="myRow2"&gt;&lt;/tr&gt;
  
  &lt;/table&gt;
  </code></pre>