HTML5，如何通过双击删除表格单元格中的图像？

时间：2016-10-30 14:53:25

标签： javascript html5 click double

我有这个HTML5代码：

<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>

代码的结果：

enter image description here

基本上我可以将数字图像（左侧）带到表格（右侧）。 当我们双击它时，我想在右边的桌子上删除图像。 您可以在演示中看到我的尝试，但它们无法正常工作。 target是删除“divLeft1”中的图像。  我希望有人能在这里帮助我，谢谢你

3 个答案:

答案 0 :(得分：0)

当用户双击某个元素时，会发生ondblclick事件。

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>

答案 1 :(得分：0)

如果我理解你的问题，你可以在img上添加一个ondblclick事件，它可以调用一个'set set display：none。

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

答案 2 :(得分：0)

我建议为要删除的所有图像添加一个类，因为它可以帮助设置所有图像的样式，并为一个class添加一个类的所有图像添加和事件监听器...

添加以下js代码（假设您的文档中没有任何其他图像会受到影响）

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="";
  })
}

注意：请记住添加一个类并向该类添加一个监听器all_img=document.querySelectorAll("classname")

See codepen here

相关问题
最新问题