ev.target.children [0] не является объектом

Question

Мой Javascript ниже.

Если я не вставляю ev.target.removeChild(ev.target.children[0]);, он работает. Однако, когда я запускаю код выше, я получаю сообщение об ошибке.

TypeError: Argument 1 of Node.removeChild is not an object. 

Что мне делать?

Я делаю настольную игру. Если игрок перетащит &, снимите кусок, <img> этой части движется.

(function() { 
 
    var allowDrop, drag, drop; 
 

 
    window.allowDrop = allowDrop = function(ev) { 
 
    return ev.preventDefault(); 
 
    }; 
 

 
    window.drag = drag = function(ev) { 
 
    return ev.dataTransfer.setData("image", ev.target.id); 
 
    }; 
 

 
    window.drop = drop = function(ev) { 
 
    var data; 
 
    ev.preventDefault(); 
 
    data = ev.dataTransfer.getData("image"); 
 
    ev.target.removeChild(ev.target.children[0]); 
 
    return ev.target.appendChild(document.getElementById(data)); 
 
    }; 
 

 
}).call(this);

<table> 
 
    <tr> 
 
    <td id="1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
      <img></img> 
 
     </td> 
 
     <td id=" 2 " ondrop = "drop(event) " ondragover = "allowDrop(event)"> 
 
     <img></img> 
 
    </td> 
 
    ... 
 
    </tr> 
 
    <tr> 
 
    ... 
 
    </tr> 
 
    ... 
 
</table>

Answer 1

Проверьте, есть ли цель дети, прежде чем пытаться удалить его:

if (ev.target.firstChild) { 
    ev.target.removeChild(ev.target.firstChild); 
} 

(function() { 
 
    var allowDrop, drag, drop; 
 

 
    window.allowDrop = allowDrop = function(ev) { 
 
    return ev.preventDefault(); 
 
    }; 
 

 
    window.drag = drag = function(ev) { 
 
    return ev.dataTransfer.setData("image", ev.target.id); 
 
    }; 
 

 
    window.drop = drop = function(ev) { 
 
    var data; 
 
    ev.preventDefault(); 
 
    data = ev.dataTransfer.getData("image"); 
 
    if (ev.target.firstChild) { 
 
     ev.target.removeChild(ev.target.firstChild); 
 
    } 
 
    return ev.target.appendChild(document.getElementById(data)); 
 
    }; 
 

 
}).call(this);

<table> 
 
    <tr> 
 
    <td id="1" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
     <img></img> 
 
    </td> 
 
    <td id="2" ondrop="drop(event)" ondragover="allowDrop(event)"> 
 
     <img></img> 
 
    </td> 
 
    ... 
 
    </tr> 
 
    <tr> 
 
    ... 
 
    </tr> 
 
    ... 
 
</table>