HTML5, how can I delete an image in table cell by double clicking on it?

Question

I have this HTML5 code:

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    ev.target.appendChild(nodeCopy);
    ev.stopPropagation();
    return false;
 
//function myFunction() {
 //ev.target.removeChild(noteCopy);
    //document.getElementById("demo").innerHTML = "Hello World";
//}


//$nodeCopy.on('dblclick', function () {
  //  $nodeCopy.remove();
    //layer.draw();
 //}
  //image.on('dblclick', function() {
        //image.remove();
        //layer.draw();*/
 //$("#image").dblclick(function()
 //{
 //image.remove();

//function myFunction() 
//{
    //document.getElementById("divLeft1").removeChild(nodeCopy);
 //document.getElementById("divLeft1").removeChild(nodeCopy);
//}
 
 
}

</script>

 
#divLeft {
  height: 800px;
  float: left;
}
 

#divRight {
  height:800px;
  float: left;
}

/*
#div1, #div2 {
  float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}
*/

#divRight1, #divRight2, #divRight3, #divRight4 ,#divRight5, #divRight6, #divRight7, #divRight8,#divRight9, #divRight10, #divRight11, #divRight12, 
#divRight13, #divRight14, #divRight15, #divRight16,#divRight17, #divRight18, #divRight19, #divRight20,#divRight21, #divRight22, #divRight23, #divRight24  
#divRight25, #divRight26, #divRight27, #divRight28,#divRight29, #divRight30, #divRight31, #divRight32,#divRight33, #divRight34, #divRight35, #divRight36, 
#divRight37, #divRight38, #divRight39, #divRight40,#divRight41, #divRight42, #divRight43, #divRight44,#divRight45, #divRight46, #divRight47, #divRight48
#divRight49, #divRight50, #divRight51, #divRight52 ,#divRight53, #divRight54, #divRight55, #divRight56,#divRight57, #divRight58, #divRight59, #divRight60, 
#divRight61, #divRight62, #divRight63, #divRight64,#divRight65, #divRight66, #divRight67, #divRight68,#divRight69, #divRight70, #divRight71, #divRight72
#divRight73, #divRight74, #divRight75, #divRight76 ,#divRight77, #divRight78, #divRight79, #divRight80,#divRight81, #divRight82, #divRight83, #divRight84, 
#divRight85, #divRight86, #divRight87, #divRight88,#divRight89, #divRight90, #divRight91, #divRight92,#divRight93, #divRight94, #divRight95, #divRight96
#divRight97, #divRight98, #divRight99, #divRight100,#divRight101, #divRight102, #divRight199, #divRight200,#divRight300, #divRight400, #divRight500, 
#divRight600{
  height: 55px;
  width: 55px;
  border: 1px solid #000;
  background-color: lightblue;
}

<DOCTYPE HTML5>
<html>
<head>
<title>Tursun: drag and clone</title>
</head>

<script>
function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) 
{
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var nodeCopy = document.getElementById(data).cloneNode(true);
    ev.target.appendChild(nodeCopy);
    ev.stopPropagation();
    return false;
 
//function myFunction() {
 //ev.target.removeChild(noteCopy);
    //document.getElementById("demo").innerHTML = "Hello World";
//}


//$nodeCopy.on('dblclick', function () {
  //  $nodeCopy.remove();
    //layer.draw();
 //}
  //image.on('dblclick', function() {
        //image.remove();
        //layer.draw();*/
 //$("#image").dblclick(function()
 //{
 //image.remove();

//function myFunction() 
//{
    //document.getElementById("divLeft1").removeChild(nodeCopy);
 //document.getElementById("divLeft1").removeChild(nodeCopy);
//}
 
 
}

</script>
<link rel="stylesheet" type="text/css" href="CSS_forHTML6.css" media="screen" />
</head>
<body>
<div id="divLeft" border="1" >
<table>
<tr>
  <td><div id="divLeft1" contentEditable="true" >
    <img src="24.png" draggable="true" ondragstart="drag(event)" id="drag1" width="50" height="50" ondblclick="myFunction()">
  </div>
  </td>
  <td>
  <div id="divLeft2">
    <img src="2.png" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft3">
    <img src="23.png" draggable="true" ondragstart="drag(event)" id="drag3" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft4">
    <img src="4.png" draggable="true" ondragstart="drag(event)" id="drag4" width="50" height="50">
  </div>
  </td>

<td>
  <div id="divLeft5">
    <img src="5.png" draggable="true" ondragstart="drag(event)" id="drag5" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft6">
    <img src="6.png" draggable="true" ondragstart="drag(event)" id="drag6" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft7">
    <img src="7.png" draggable="true" ondragstart="drag(event)" id="drag7" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft8">
    <img src="8.png" draggable="true" ondragstart="drag(event)" id="drag8" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
<td>
  <div id="divLeft9">
    <img src="11.png" draggable="true" ondragstart="drag(event)" id="drag9" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft10">
    <img src="10.png" draggable="true" ondragstart="drag(event)" id="drag10" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft11">
    <img src="9.png" draggable="true" ondragstart="drag(event)" id="drag11" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft12">
    <img src="12.png" draggable="true" ondragstart="drag(event)" id="drag12" width="50" height="50">
  </div>
  </td>

<td>
  <div id="divLeft13">
    <img src="14.png" draggable="true" ondragstart="drag(event)" id="drag13" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft14">
    <img src="13.png" draggable="true" ondragstart="drag(event)" id="drag14" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft15">
    <img src="15.png" draggable="true" ondragstart="drag(event)" id="drag15" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft16">
    <img src="16.png" draggable="true" ondragstart="drag(event)" id="drag16" width="50" height="50">
  </div>
  </td>
</tr>
  <tr>
  <td>
  <div id="divLeft17">
    <img src="18.png" draggable="true" ondragstart="drag(event)" id="drag17" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft18">
    <img src="17.png" draggable="true" ondragstart="drag(event)" id="drag18" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft19">
    <img src="19.png" draggable="true" ondragstart="drag(event)" id="drag19" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft20">
    <img src="20.png" draggable="true" ondragstart="drag(event)" id="drag20" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft21">
    <img src="21.png" draggable="true" ondragstart="drag(event)" id="drag21" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft22">
    <img src="22.png" draggable="true" ondragstart="drag(event)" id="drag22" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft23">
    <img src="3.png" draggable="true" ondragstart="drag(event)" id="drag23" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft24">
    <img src="1.png" draggable="true" ondragstart="drag(event)" id="drag24" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft25">
    <img src="25.png" draggable="true" ondragstart="drag(event)" id="drag25" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft26">
    <img src="26.png" draggable="true" ondragstart="drag(event)" id="drag26" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft27">
    <img src="27.png" draggable="true" ondragstart="drag(event)" id="drag27" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft28">
    <img src="28.png" draggable="true" ondragstart="drag(event)" id="drag28" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft29">
    <img src="29.png" draggable="true" ondragstart="drag(event)" id="drag29" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft30">
    <img src="30.png" draggable="true" ondragstart="drag(event)" id="drag30" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft31">
    <img src="31.png" draggable="true" ondragstart="drag(event)" id="drag31" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft32">
    <img src="32.png" draggable="true" ondragstart="drag(event)" id="drag32" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft33">
    <img src="33.png" draggable="true" ondragstart="drag(event)" id="drag33" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft34">
    <img src="34.png" draggable="true" ondragstart="drag(event)" id="drag34" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft35">
    <img src="35.png" draggable="true" ondragstart="drag(event)" id="drag35" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft36">
    <img src="36.png" draggable="true" ondragstart="drag(event)" id="drag36" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft37">
    <img src="37.png" draggable="true" ondragstart="drag(event)" id="drag37" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft38">
    <img src="38.png" draggable="true" ondragstart="drag(event)" id="drag38" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft39">
    <img src="39.png" draggable="true" ondragstart="drag(event)" id="drag39" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft40">
    <img src="40.png" draggable="true" ondragstart="drag(event)" id="drag40" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft41">
    <img src="41.png" draggable="true" ondragstart="drag(event)" id="drag41" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft42">
    <img src="42.png" draggable="true" ondragstart="drag(event)" id="drag42" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft43">
    <img src="43.png" draggable="true" ondragstart="drag(event)" id="drag43" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft44">
    <img src="44.png" draggable="true" ondragstart="drag(event)" id="drag44" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft45">
    <img src="45.png" draggable="true" ondragstart="drag(event)" id="drag45" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft46">
    <img src="46.png" draggable="true" ondragstart="drag(event)" id="drag46" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft47">
    <img src="47.png" draggable="true" ondragstart="drag(event)" id="drag47" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft48">
    <img src="48.png" draggable="true" ondragstart="drag(event)" id="drag48" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft49">
    <img src="49.png" draggable="true" ondragstart="drag(event)" id="drag49" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft50">
    <img src="50.png" draggable="true" ondragstart="drag(event)" id="drag50" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft51">
    <img src="51.png" draggable="true" ondragstart="drag(event)" id="drag51" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft52">
    <img src="52.png" draggable="true" ondragstart="drag(event)" id="drag52" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft53">
    <img src="53.png" draggable="true" ondragstart="drag(event)" id="drag53" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft54">
    <img src="54.png" draggable="true" ondragstart="drag(event)" id="drag54" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft55">
    <img src="55.png" draggable="true" ondragstart="drag(event)" id="drag55" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft56">
    <img src="56.png" draggable="true" ondragstart="drag(event)" id="drag56" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft57">
    <img src="57.png" draggable="true" ondragstart="drag(event)" id="drag57" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft58">
    <img src="58.png" draggable="true" ondragstart="drag(event)" id="drag58" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft59">
    <img src="59.png" draggable="true" ondragstart="drag(event)" id="drag59" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft60">
    <img src="60.png" draggable="true" ondragstart="drag(event)" id="drag60" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft61">
    <img src="61.png" draggable="true" ondragstart="drag(event)" id="drag61" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft62">
    <img src="62.png" draggable="true" ondragstart="drag(event)" id="drag62" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft63">
    <img src="63.png" draggable="true" ondragstart="drag(event)" id="drag63" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft64">
    <img src="64.png" draggable="true" ondragstart="drag(event)" id="drag64" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft65">
    <img src="65.png" draggable="true" ondragstart="drag(event)" id="drag65" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft66">
    <img src="66.png" draggable="true" ondragstart="drag(event)" id="drag66" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft67">
    <img src="67.png" draggable="true" ondragstart="drag(event)" id="drag67" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft68">
    <img src="68.png" draggable="true" ondragstart="drag(event)" id="drag68" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft69">
    <img src="69.png" draggable="true" ondragstart="drag(event)" id="drag69" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft70">
    <img src="70.png" draggable="true" ondragstart="drag(event)" id="drag70" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft71">
    <img src="71.png" draggable="true" ondragstart="drag(event)" id="drag71" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft72">
    <img src="72.png" draggable="true" ondragstart="drag(event)" id="drag72" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft73">
    <img src="73.png" draggable="true" ondragstart="drag(event)" id="drag73" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft74">
    <img src="74.png" draggable="true" ondragstart="drag(event)" id="drag74" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft75">
    <img src="75.png" draggable="true" ondragstart="drag(event)" id="drag75" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft76">
    <img src="76.png" draggable="true" ondragstart="drag(event)" id="drag76" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft77">
    <img src="77.png" draggable="true" ondragstart="drag(event)" id="drag77" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft78">
    <img src="78.png" draggable="true" ondragstart="drag(event)" id="drag78" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft79">
    <img src="79.png" draggable="true" ondragstart="drag(event)" id="drag79" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft80">
    <img src="80.png" draggable="true" ondragstart="drag(event)" id="drag80" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft81">
    <img src="81.png" draggable="true" ondragstart="drag(event)" id="drag81" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft82">
    <img src="82.png" draggable="true" ondragstart="drag(event)" id="drag82" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft83">
    <img src="83.png" draggable="true" ondragstart="drag(event)" id="drag83" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft84">
    <img src="84.png" draggable="true" ondragstart="drag(event)" id="drag84" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft85">
    <img src="85.png" draggable="true" ondragstart="drag(event)" id="drag85" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft86">
    <img src="86.png" draggable="true" ondragstart="drag(event)" id="drag86" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft87">
    <img src="87.png" draggable="true" ondragstart="drag(event)" id="drag87" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft88">
    <img src="88.png" draggable="true" ondragstart="drag(event)" id="drag88" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft89">
    <img src="89.png" draggable="true" ondragstart="drag(event)" id="drag89" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft90">
    <img src="90.png" draggable="true" ondragstart="drag(event)" id="drag90" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft91">
    <img src="91.png" draggable="true" ondragstart="drag(event)" id="drag91" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft92">
    <img src="92.png" draggable="true" ondragstart="drag(event)" id="drag92" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft93">
    <img src="93.png" draggable="true" ondragstart="drag(event)" id="drag93" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft94">
    <img src="94.png" draggable="true" ondragstart="drag(event)" id="drag94" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft95">
    <img src="95.png" draggable="true" ondragstart="drag(event)" id="drag95" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft96">
    <img src="96.png" draggable="true" ondragstart="drag(event)" id="drag96" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft97">
    <img src="97.png" draggable="true" ondragstart="drag(event)" id="drag97" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft98">
    <img src="98.png" draggable="true" ondragstart="drag(event)" id="drag98" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft99">
    <img src="99.png" draggable="true" ondragstart="drag(event)" id="drag99" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft100">
    <img src="100.png" draggable="true" ondragstart="drag(event)" id="drag100" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft33">
    <img src="33.png" draggable="true" ondragstart="drag(event)" id="drag33" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft34">
    <img src="34.png" draggable="true" ondragstart="drag(event)" id="drag34" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft35">
    <img src="35.png" draggable="true" ondragstart="drag(event)" id="drag35" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft36">
    <img src="36.png" draggable="true" ondragstart="drag(event)" id="drag36" width="50" height="50">
  </div>
  </td>
</tr>

</table>
</div>

<div id="divRight" border="1">
<table>
<tr>
  <td><div id="divRight1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>

  <td><div id="divRight5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight6" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight7" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight8" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>

  <td><div id="divRight9" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight10" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight11" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight12" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
 </table>
</div>
</body>
</html>

And result of the code:

basically I can bring number images(on the left) into a table (on the right). I want images on the right table DELETE able when we double click it. You can see my attempts in demo, they did not work. target is to delete an image in "divLeft1". I hope somebody would help me here, thank you

Clean your code and your question and make sure you keep **only** the relevant things. All of your long HTML is not relevant, and also I can't understand why the drag&drop are relevant to the "doubleclick" and "remove" parts in your question. — Dekel, Oct 30 '16 at 14:55
@Dekel, thank you for your comment , I take them all; sorry Im new. Well, if i shorten my question, did you that picture I uploaded: Nubmers (they are images) on the left "Div" , I can drag and drop them into the Table (light blue). Imagine I dropped a wrong number (say drop 4 after 2, it has to be 3 actually) so I want to delete it . I am asking HOW TO DELETE it. Thank you. — tursunWali, Oct 30 '16 at 15:06
Post a **minimal working code snippet** that reproduce the issue. We can't parse through all that code — Asons, Oct 30 '16 at 15:12

Kamarul Anuar · Answer 1 · 2016-10-30T15:47:27.220

The ondblclick event occurs when the user double-clicks on an element.

var images = document.getElementsByTagName("img"); 
for(var i=0; i<images.length; i++){ 
 images[i].ondblclick = function(){ 
   this.parentNode.removeChild(this)
 } 
}

#divLeft {
  height: 800px;
  float: left;
}
 

#divRight {
  height:800px;
  float: left;
}

/*
#div1, #div2 {
  float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}
*/

#divRight1, #divRight2, #divRight3, #divRight4 ,#divRight5, #divRight6, #divRight7, #divRight8,#divRight9, #divRight10, #divRight11, #divRight12, 
#divRight13, #divRight14, #divRight15, #divRight16,#divRight17, #divRight18, #divRight19, #divRight20,#divRight21, #divRight22, #divRight23, #divRight24  
#divRight25, #divRight26, #divRight27, #divRight28,#divRight29, #divRight30, #divRight31, #divRight32,#divRight33, #divRight34, #divRight35, #divRight36, 
#divRight37, #divRight38, #divRight39, #divRight40,#divRight41, #divRight42, #divRight43, #divRight44,#divRight45, #divRight46, #divRight47, #divRight48
#divRight49, #divRight50, #divRight51, #divRight52 ,#divRight53, #divRight54, #divRight55, #divRight56,#divRight57, #divRight58, #divRight59, #divRight60, 
#divRight61, #divRight62, #divRight63, #divRight64,#divRight65, #divRight66, #divRight67, #divRight68,#divRight69, #divRight70, #divRight71, #divRight72
#divRight73, #divRight74, #divRight75, #divRight76 ,#divRight77, #divRight78, #divRight79, #divRight80,#divRight81, #divRight82, #divRight83, #divRight84, 
#divRight85, #divRight86, #divRight87, #divRight88,#divRight89, #divRight90, #divRight91, #divRight92,#divRight93, #divRight94, #divRight95, #divRight96
#divRight97, #divRight98, #divRight99, #divRight100,#divRight101, #divRight102, #divRight199, #divRight200,#divRight300, #divRight400, #divRight500, 
#divRight600{
  height: 55px;
  width: 55px;
  border: 1px solid #000;
  background-color: lightblue;
}

<div id="divLeft" border="1" >
<table>
<tr>
  <td><div id="divLeft1" contentEditable="true" >
    <img src="24.png" draggable="true" ondragstart="drag(event)" id="drag1" width="50" height="50" ondblclick="myFunction()">
  </div>
  </td>
  <td>
  <div id="divLeft2">
    <img src="2.png" draggable="true" ondragstart="drag(event)" id="drag2" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft3">
    <img src="23.png" draggable="true" ondragstart="drag(event)" id="drag3" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft4">
    <img src="4.png" draggable="true" ondragstart="drag(event)" id="drag4" width="50" height="50">
  </div>
  </td>

<td>
  <div id="divLeft5">
    <img src="5.png" draggable="true" ondragstart="drag(event)" id="drag5" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft6">
    <img src="6.png" draggable="true" ondragstart="drag(event)" id="drag6" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft7">
    <img src="7.png" draggable="true" ondragstart="drag(event)" id="drag7" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft8">
    <img src="8.png" draggable="true" ondragstart="drag(event)" id="drag8" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
<td>
  <div id="divLeft9">
    <img src="11.png" draggable="true" ondragstart="drag(event)" id="drag9" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft10">
    <img src="10.png" draggable="true" ondragstart="drag(event)" id="drag10" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft11">
    <img src="9.png" draggable="true" ondragstart="drag(event)" id="drag11" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft12">
    <img src="12.png" draggable="true" ondragstart="drag(event)" id="drag12" width="50" height="50">
  </div>
  </td>

<td>
  <div id="divLeft13">
    <img src="14.png" draggable="true" ondragstart="drag(event)" id="drag13" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft14">
    <img src="13.png" draggable="true" ondragstart="drag(event)" id="drag14" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft15">
    <img src="15.png" draggable="true" ondragstart="drag(event)" id="drag15" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft16">
    <img src="16.png" draggable="true" ondragstart="drag(event)" id="drag16" width="50" height="50">
  </div>
  </td>
</tr>
  <tr>
  <td>
  <div id="divLeft17">
    <img src="18.png" draggable="true" ondragstart="drag(event)" id="drag17" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft18">
    <img src="17.png" draggable="true" ondragstart="drag(event)" id="drag18" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft19">
    <img src="19.png" draggable="true" ondragstart="drag(event)" id="drag19" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft20">
    <img src="20.png" draggable="true" ondragstart="drag(event)" id="drag20" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft21">
    <img src="21.png" draggable="true" ondragstart="drag(event)" id="drag21" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft22">
    <img src="22.png" draggable="true" ondragstart="drag(event)" id="drag22" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft23">
    <img src="3.png" draggable="true" ondragstart="drag(event)" id="drag23" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft24">
    <img src="1.png" draggable="true" ondragstart="drag(event)" id="drag24" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft25">
    <img src="25.png" draggable="true" ondragstart="drag(event)" id="drag25" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft26">
    <img src="26.png" draggable="true" ondragstart="drag(event)" id="drag26" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft27">
    <img src="27.png" draggable="true" ondragstart="drag(event)" id="drag27" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft28">
    <img src="28.png" draggable="true" ondragstart="drag(event)" id="drag28" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft29">
    <img src="29.png" draggable="true" ondragstart="drag(event)" id="drag29" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft30">
    <img src="30.png" draggable="true" ondragstart="drag(event)" id="drag30" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft31">
    <img src="31.png" draggable="true" ondragstart="drag(event)" id="drag31" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft32">
    <img src="32.png" draggable="true" ondragstart="drag(event)" id="drag32" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft33">
    <img src="33.png" draggable="true" ondragstart="drag(event)" id="drag33" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft34">
    <img src="34.png" draggable="true" ondragstart="drag(event)" id="drag34" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft35">
    <img src="35.png" draggable="true" ondragstart="drag(event)" id="drag35" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft36">
    <img src="36.png" draggable="true" ondragstart="drag(event)" id="drag36" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft37">
    <img src="37.png" draggable="true" ondragstart="drag(event)" id="drag37" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft38">
    <img src="38.png" draggable="true" ondragstart="drag(event)" id="drag38" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft39">
    <img src="39.png" draggable="true" ondragstart="drag(event)" id="drag39" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft40">
    <img src="40.png" draggable="true" ondragstart="drag(event)" id="drag40" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft41">
    <img src="41.png" draggable="true" ondragstart="drag(event)" id="drag41" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft42">
    <img src="42.png" draggable="true" ondragstart="drag(event)" id="drag42" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft43">
    <img src="43.png" draggable="true" ondragstart="drag(event)" id="drag43" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft44">
    <img src="44.png" draggable="true" ondragstart="drag(event)" id="drag44" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft45">
    <img src="45.png" draggable="true" ondragstart="drag(event)" id="drag45" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft46">
    <img src="46.png" draggable="true" ondragstart="drag(event)" id="drag46" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft47">
    <img src="47.png" draggable="true" ondragstart="drag(event)" id="drag47" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft48">
    <img src="48.png" draggable="true" ondragstart="drag(event)" id="drag48" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft49">
    <img src="49.png" draggable="true" ondragstart="drag(event)" id="drag49" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft50">
    <img src="50.png" draggable="true" ondragstart="drag(event)" id="drag50" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft51">
    <img src="51.png" draggable="true" ondragstart="drag(event)" id="drag51" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft52">
    <img src="52.png" draggable="true" ondragstart="drag(event)" id="drag52" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft53">
    <img src="53.png" draggable="true" ondragstart="drag(event)" id="drag53" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft54">
    <img src="54.png" draggable="true" ondragstart="drag(event)" id="drag54" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft55">
    <img src="55.png" draggable="true" ondragstart="drag(event)" id="drag55" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft56">
    <img src="56.png" draggable="true" ondragstart="drag(event)" id="drag56" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft57">
    <img src="57.png" draggable="true" ondragstart="drag(event)" id="drag57" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft58">
    <img src="58.png" draggable="true" ondragstart="drag(event)" id="drag58" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft59">
    <img src="59.png" draggable="true" ondragstart="drag(event)" id="drag59" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft60">
    <img src="60.png" draggable="true" ondragstart="drag(event)" id="drag60" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft61">
    <img src="61.png" draggable="true" ondragstart="drag(event)" id="drag61" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft62">
    <img src="62.png" draggable="true" ondragstart="drag(event)" id="drag62" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft63">
    <img src="63.png" draggable="true" ondragstart="drag(event)" id="drag63" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft64">
    <img src="64.png" draggable="true" ondragstart="drag(event)" id="drag64" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft65">
    <img src="65.png" draggable="true" ondragstart="drag(event)" id="drag65" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft66">
    <img src="66.png" draggable="true" ondragstart="drag(event)" id="drag66" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft67">
    <img src="67.png" draggable="true" ondragstart="drag(event)" id="drag67" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft68">
    <img src="68.png" draggable="true" ondragstart="drag(event)" id="drag68" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft69">
    <img src="69.png" draggable="true" ondragstart="drag(event)" id="drag69" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft70">
    <img src="70.png" draggable="true" ondragstart="drag(event)" id="drag70" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft71">
    <img src="71.png" draggable="true" ondragstart="drag(event)" id="drag71" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft72">
    <img src="72.png" draggable="true" ondragstart="drag(event)" id="drag72" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft73">
    <img src="73.png" draggable="true" ondragstart="drag(event)" id="drag73" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft74">
    <img src="74.png" draggable="true" ondragstart="drag(event)" id="drag74" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft75">
    <img src="75.png" draggable="true" ondragstart="drag(event)" id="drag75" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft76">
    <img src="76.png" draggable="true" ondragstart="drag(event)" id="drag76" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft77">
    <img src="77.png" draggable="true" ondragstart="drag(event)" id="drag77" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft78">
    <img src="78.png" draggable="true" ondragstart="drag(event)" id="drag78" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft79">
    <img src="79.png" draggable="true" ondragstart="drag(event)" id="drag79" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft80">
    <img src="80.png" draggable="true" ondragstart="drag(event)" id="drag80" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft81">
    <img src="81.png" draggable="true" ondragstart="drag(event)" id="drag81" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft82">
    <img src="82.png" draggable="true" ondragstart="drag(event)" id="drag82" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft83">
    <img src="83.png" draggable="true" ondragstart="drag(event)" id="drag83" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft84">
    <img src="84.png" draggable="true" ondragstart="drag(event)" id="drag84" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft85">
    <img src="85.png" draggable="true" ondragstart="drag(event)" id="drag85" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft86">
    <img src="86.png" draggable="true" ondragstart="drag(event)" id="drag86" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft87">
    <img src="87.png" draggable="true" ondragstart="drag(event)" id="drag87" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft88">
    <img src="88.png" draggable="true" ondragstart="drag(event)" id="drag88" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft89">
    <img src="89.png" draggable="true" ondragstart="drag(event)" id="drag89" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft90">
    <img src="90.png" draggable="true" ondragstart="drag(event)" id="drag90" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft91">
    <img src="91.png" draggable="true" ondragstart="drag(event)" id="drag91" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft92">
    <img src="92.png" draggable="true" ondragstart="drag(event)" id="drag92" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft93">
    <img src="93.png" draggable="true" ondragstart="drag(event)" id="drag93" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft94">
    <img src="94.png" draggable="true" ondragstart="drag(event)" id="drag94" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft95">
    <img src="95.png" draggable="true" ondragstart="drag(event)" id="drag95" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft96">
    <img src="96.png" draggable="true" ondragstart="drag(event)" id="drag96" width="50" height="50">
  </div>
  </td>
</tr>
<tr>
 <td>
  <div id="divLeft97">
    <img src="97.png" draggable="true" ondragstart="drag(event)" id="drag97" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft98">
    <img src="98.png" draggable="true" ondragstart="drag(event)" id="drag98" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft99">
    <img src="99.png" draggable="true" ondragstart="drag(event)" id="drag99" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft100">
    <img src="100.png" draggable="true" ondragstart="drag(event)" id="drag100" width="50" height="50">
  </div>
  </td>

 <td>
  <div id="divLeft33">
    <img src="33.png" draggable="true" ondragstart="drag(event)" id="drag33" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft34">
    <img src="34.png" draggable="true" ondragstart="drag(event)" id="drag34" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft35">
    <img src="35.png" draggable="true" ondragstart="drag(event)" id="drag35" width="50" height="50">
  </div>
  </td>
  <td>
  <div id="divLeft36">
    <img src="36.png" draggable="true" ondragstart="drag(event)" id="drag36" width="50" height="50">
  </div>
  </td>
</tr>

</table>
</div>

<div id="divRight" border="1">
<table>
<tr>
  <td><div id="divRight1" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight3" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight4" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>

  <td><div id="divRight5" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight6" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight7" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight8" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>

  <td><div id="divRight9" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight10" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight11" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
  <td><div id="divRight12" ondrop="drop(event)" ondragover="allowDrop(event)"></div></td>
</tr>
 </table>
</div>

nice but .remove() does not work in old IE browser..I tried a long time figuring this out when I was building a page..then found this link http://stackoverflow.com/questions/20428877/javascript-remove-doesnt-work-in-ie.. — repzero, Oct 30 '16 at 15:38
@KamarulAnuar your code , I have executed in fireFox and Chrome, it did not work. Does problem is on this part or : images[i].ondblclick = function(){ this.parentNode.removeChild(this) } — tursunWali, Nov 01 '16 at 15:39
@tursunWali try to chage `this.parentNode.removeChild(this)` with `this.remove()` or `this.hide()` if your also can accepted hide element by css `display:none` — Kamarul Anuar, Nov 01 '16 at 19:27
@KamarulAnuar, I have tried this.remove() and this.hide(), both did not work. acutally I want to delete it , because if i hide number, i am afraid I can not put new number in that cell. — tursunWali, Nov 02 '16 at 09:54
Then RIP your mouse. that pure javascript version should working on any browser @tursunWali — Kamarul Anuar, Feb 17 '17 at 00:12

score 0 · Answer 2 · edited Oct 30 '16 at 17:21

0

If I understood your question correctly, you can add an ondblclick Event to the img, which can call a function that'll set display:none.

<img src="YOUR-IMG" id="ID" ondblclick="deleteImg(this.id)"/>`
deleteImg(id) {
  document.getElementById(id).style.display = "none";
}

edited Oct 30 '16 at 17:21

Dom

1,687
6
27
37

answered Oct 30 '16 at 15:27

Zach Newburgh

563
3
11

yes you understand it right. your code looks promising , let me try right away... – tursunWali Oct 30 '16 at 16:40
Newborgh, your code did not work, did I do something wrong: function deleteImg(id) { document.getElementById(id).style.display = "none"; } // }

– tursunWali Oct 30 '16 at 16:51
@tursunWali if your want to hide it using, you should edit the question to **hide**, not **delete** – Kamarul Anuar Oct 31 '16 at 06:43

repzero · Answer 3 · 2016-10-30T15:45:08.153

I advise to add a class to all images to be removed since it will help with styling all images and adding and event listener to all images with one class with one class...

Add the following js codes (Assuming you don't have any other images in your document that will be affected)

var all_img=document.querySelectorAll("img")
console.log(all_img) 
console.log(all_img) 


for(var x=0;x<all_img.length;++x){
  all_img[x].addEventListener('click',function(){
    this.outerHTML="";
  })
}

Note: remember to add a class and add a listener to the that class all_img=document.querySelectorAll("classname")

See codepen here

HTML5, how can I delete an image in table cell by double clicking on it?

3 Answers3