How to display the drag area div and remove image on the drag area div in javascript?

This is my html code snippet:

<div class="container-fluid">
    <div class="drag-area">
        <span class="header"> Drag & Drop </span>
        <span class="header"> or <span class="browse_button">browse</span> </span>
        <input type="file" hidden/>
    </div>
    <button type="button" id="reset_button" class="btn btn-outline-secondary" 
    disabled="disabled">Reset</button>
    <button type="button" id="convert_button" class="btn btn-primary" 
    disabled="disabled">Convert</button>

Drag&Drop div visible

And this is my javascript code snippet:

const dragArea = document.querySelector('.drag-area');
const dragText = document.querySelector('.header');

let button = document.querySelector('.browse_button');
let input = document.querySelector('input');
let reset_button = document.querySelector('#reset_button');
let convert_button = document.querySelector('#convert_button');

// When reset button clicked
reset_button.onclick = () => {
    input.value = "";
    console.log(input.value);

    document.getElementById('nnn').remove(); // This is image id

    reset_button.disabled = true; // To disable reset button
    convert_button.disabled = true; // To disable convert button

    dragArea.classList.remove('active');
    result_div.classList.add('result_none_class'); // Add result_none_class class into 
    result_div to hide this result div
}

When I clicked on reset button I can remove the image from the div but the drag and drop div not display which is shown in first image above it’s show like this_

Image removed but drag&drop div not visible as shown in first image

Can anyone please tell me how can I display drag and drop screen on reset button clicked?