Javascript variable is empty

I have a an xml file that I'm using as a database for my website. I have a table that contains all the products of the website. When you add a product to the xml, it automatically updates the table (see image).

Now, I want to be able to delete the product from here also by clicking the delete button. I want to delete the product by grabbing the name of the product by Javascript and sending that name back to php for processing the xml.

Here's the problem: When I try to grab the product name from the table, the string is empty when I do console.log. How can I solve this?

Here is some relevant code:

This is the part of the Javascript where I am reading the xml file to append the info of the product from xml to the website:

                //name
                td = document.createElement('td');
                td.innerHTML = productNode.children[0].innerHTML;
                row.appendChild(td);

                //price
                td = document.createElement('td');
                let price = productNode.children[4].innerHTML;
                let priceArray = price.split(',');
                let priceList = makeUL(priceArray);
                td.appendChild(priceList);
                row.appendChild(td);

                //type 
                td = document.createElement('td');
                let type = productNode.children[6].innerHTML;
                let typeArray = type.split(',');
                let typeList = makeUL(typeArray);
                td.appendChild(typeList);
                row.appendChild(td);

                console.log("running..........")


                //size
                td = document.createElement('td');
                let size = productNode.children[5].innerHTML;
                let sizeArray = size.split(',');
                let sizeList = makeUL(sizeArray);
                td.appendChild(sizeList);
                row.appendChild(td);

                //quantity
                td = document.createElement('td');
                td.innerHTML = productNode.children[2].innerHTML;
                row.appendChild(td);

                //stock
                td = document.createElement('td');
                td.innerHTML = productNode.children[3].innerHTML;
                row.appendChild(td);


                //buttons to remove and edit (not pulled from database)
                td = document.createElement('td');
                td.innerHTML = "<a href='edit_product.html' class='btn btn-outline-dark'>Edit</a>  <a href='#myModal' name='delete' onclick=deleteProduct() class='btn btn-outline-danger' >Remove</a>"
                row.appendChild(td);
            
                productTable.children[1].appendChild(row); 

And here is the Javascript for sending info to the server:

 function deleteProduct() {
    let productName = $(this).closest('tr').find('td:nth-child(1)').text();
    console.log(productName);
    $.post("deleteProduct.php", {prodName : productName});
} 

In this segment, when I do console.log(productName), it doesn't print anything, hence the server can't process it.