javascript remove button not working. multi parent div issue

Question

I am creating Div class="row" which has 5 Div class="Col" . This div row gets creating depending how many files you upload

below i am creating each remove button for each file is uploaded. Than I have a function which removes a file, depending on which file you remove

Error: Uncaught TypeError: Cannot read properties of undefined (reading 'parentElement') on Line: el.target.parentElement.remove();

 ColDiv5.innerHTML += '<button id="Removebtn" name="btn" onclick=removeImage(this)>X1</button>';
 
function removeImage(el) {
        alert('flag1');
        el.target.parentElement.remove();
        alert('flag2' );
    }

Full Code

 dropZone.addEventListener('drop', (e) => {
        document.getElementById('dropZone').classList.remove("hoverActive");
        e.stopPropagation();
        e.preventDefault();

        var files = e.dataTransfer.files;
        Object.values(files).forEach((file) => { // loop though all files 
            var reader = new FileReader();
            reader.onloadend = () => { //read each file

                //new Row
                let RowDiv = document.createElement('div');
                RowDiv.className += 'row';

                //col#1 
                let ColDiv1 = document.createElement('div');
                ColDiv1.className += "col-md-4";

                //display file name
                var filename = ` ${file.name}`;
                ColDiv1.innerHTML += filename;

                //col#2
                let ColDiv2 = document.createElement('Div');
                ColDiv2.className += "col-md-2";
                ColDiv2.innerHTML = "Convert to PNG";
                

                //col # 3
                let ColDiv3 = document.createElement('div');
                ColDiv3.className += "col-md-2";
                //col # 3 - label
                let FileUpdateDiv = document.createElement('div');
                FileUpdateDiv.className = "bg-warning text-white";
                FileUpdateDiv.innerHTML = "Waiting";
                ColDiv3.append(FileUpdateDiv);

                //col # 4
                let ColDiv4 = document.createElement('div');
                ColDiv4.className += "col-md-3";
                 //col # 4 - download button
                let downloadBtn = document.createElement('button');
                downloadBtn.innerHTML = "Download";
                ColDiv4.append(downloadBtn);

                //col # 5
                let ColDiv5 = document.createElement('div');
                ColDiv5.className += "col-md-1";
                //col # 5 - Remove button
                ColDiv5.innerHTML += '<button id="Removebtn" name="btn" onclick=removeImage(this)>X1</button>';

               

                RowDiv.append(ColDiv1);
                RowDiv.append(ColDiv2);
                RowDiv.append(ColDiv3);
                RowDiv.append(ColDiv4);
                RowDiv.append(ColDiv5);

                //set to target elem
                detailsDiv.append(RowDiv);

            };
            reader.readAsDataURL(file);
        });
    });


    function removeImage(el) {
        alert('flag1');
        el.target.parentElement.remove();
        alert('flag2' );
    }
    

Answer 1

You are passing an element directly to your function, not event args. DOM elements directly contain a parentElement property. Edit your function to be:

function removeImage(el) {
  el.parentElement.remove();
}