How to remove the ghost image of a PNG? (or the white backgorund of the ghost image)

/* ------- BOARD GENERATOR -------*/

const body = document.body;

const $addClass = (element,className) => {
    element.classList.add(className);
};

const $setId = (element,idName)=>{element.setAttribute('id',idName)}

const $createSquare = (element,squareColor,board)=> {
    element = document.createElement('div');
    $addClass(element,squareColor)
    $addClass(element,'square');
    board.appendChild(element)
};

const $createBoardBorder = (where) => {
    var board = document.createElement('div');
    $addClass(board,'board');
    where.appendChild(board)
}
var coordinates = [
    'a8','b8','c8','d8','e8','f8','g8','h8',
    'a7','b7','c7','d7','e7','f7','g7','h7',
    'a6','b6','c6','d6','e6','f6','g6','h6',
    'a5','b5','c5','d5','e5','f5','g5','h5',
    'a4','b4','c4','d4','e4','f4','g4','h4',
    'a3','b3','c3','d3','e3','f3','g3','h3',
    'a2','b2','c2','d2','e2','f2','g2','h2',
    'a1','b1','c1','d1','e1','f1','g1','h1'
];


function createBoard(size,lightColor,darkColor,where){
  
    /* CREATING A DIV WITH A CLASS 'board' */
    $createBoardBorder(where);
    /* SELECTING THE BOARD */
    var board = document.querySelector('.board');
  
    /* GENERATING ALL THE SQUARES AND PUTTING THEM INTO THE BOARD */
    var light = 'light'; var dark = 'dark';
    for (let i = 0; i < 32; i++) {
        $createSquare(coordinates,light,board);
        $createSquare(coordinates,dark,board);
        if((i+1)%4 === 0 ){
            var x = light;
            light = dark;
            dark = x;
        }
    }
    const squares = document.querySelectorAll('.square');
    
    /*PUTTING ALL THE IDS IN EACH SQUARE */
    for (let i = 0; i < squares.length; i++) {
        $setId(squares[i],coordinates[i])
    }
    // ----- BOARD STYLE -----
    const lightSquares = document.querySelectorAll('.light');
    const darkSquares = document.querySelectorAll('.dark');

    board.style.width = size+'px';
    board.style.height = size+'px';

    lightSquares.forEach((value,index)=>{
        value.style.height = size/8+'px';
        value.style.width = size/8+'px';
        value.style.backgroundColor = lightColor;

        darkSquares[index].style.height = size/8+'px';
        darkSquares[index].style.width = size/8+'px';
        darkSquares[index].style.backgroundColor = darkColor;
    })

}

const boardzone = document.getElementById('boardzone');
createBoard(500,'white','rgb(64, 100, 145)',boardzone);

/*-------- PIECE RENDER --------*/

const king = document.createElement('img');
king.setAttribute('class','piece');
king.src = "https://images.chesscomfiles.com/chess-themes/pieces/neo/150/wk.png";
e1.appendChild(king)


/*-------- DRAG AND DROP --------*/


var audio = new Audio('sound.wav');
var pieces = document.querySelectorAll('.piece');
console.log(pieces);
var squaresDrop = document.querySelectorAll('.square');
pieceCheck = ()=> {
    var pieces = document.querySelectorAll('.piece');
    pieces.forEach(piece=>{
    piece.addEventListener('dragstart',dragstart)
    piece.addEventListener('drag',drag)
    piece.addEventListener('dragend',dragend)
    
    function dragstart() {
        squaresDrop.forEach(square => square.classList.add('highlight'))
        this.style.opacity = 0;
        this.classList.add('is-dragging'); 
    }
    function drag(){
    }
    function dragend(){
        this.style.opacity = 1;
        this.classList.remove('is-dragging'); 
        audio.play(); 
    }

})}
pieceCheck(); //Checking if a new piece was added in the board

squaresDrop.forEach(square=>{
    square.addEventListener('dragenter',dragenter);
    square.addEventListener('dragover',dragover);
    square.addEventListener('dragleave',dragleave);
    square.addEventListener('drop',drop);

    function dragenter(){
    }
    function dragover(){
        this.classList.add('over')
      
        //Get dragging piece
        const draggedPiece = document.querySelector('.is-dragging');
        this.appendChild(draggedPiece);
    }
    function dragleave(){
        
        log('Leaving')
        this.classList.remove('over')
    }
    function drop(){
    }
})

body {
  background-color:rgb(15,15,15);
}
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}
#boardzone{
  margin: 60px auto;
  display: flex;
  justify-content:center;
}

/* Drag and Drop CSS */

.piece {
  height: 100%;
  user-select: none;
}
.highlight {
  background-color:rgba(14,14,14,0.2);
}
.is-dragging {
  cursor:move;
  opacity: 0.3;
  transform: translate(0, 0);
}
.over{
  background-color: rgba(173, 240, 118, 0.315);
} 

<div id='boardzone'></div>