为什么这不将数据分配给在函数外部声明的变量

Question

Been messing around trying to get this to work, as you can see in the code below when the table row is selected then it outputs an alert of which row they selected and also assigns the row's id to a variable declared outside of the method. I'm using this variable to be able to manipulate the data.

However, when it reaches another function the variable is undefined. "Uncaught TypeError: Cannot read property 'parentElement' of undefined". Where and how should this variable be declared in order for me to be able to manipulate the data which is generated by the tables?

var selectedItem;

function deleteRow() {
        selectedItem.parentElement.removeChild(selectedItem); 
}

Code snippet from inside function where the rows are created. See "Makes rows selectable:

            var tr = document.getElementById("c_row" + r);
            for (var c = 0; c < columns; c++) 
            {
                var td = document.createElement("td");        
                td.innerText = cellText[c];
                tr.appendChild(td);

                //Makes the rows selectable
                tr.onclick = function(event) {
                    alert('Clicked: ' + event.target.parentNode.id)
                    selectedItem = event.target.parentNode.id;
                }                                     
            }

Answer 1

You need a js element ... selectedItem is a string

function deleteRow() {
        document.getElementById(selectedItem).parentElement.removeChild(selectedItem); 
}

Answer 2

.id is a string, so it doesn't have a .parentNode property. Instead assign the element directly.

 selectedItem = event.target.parentNode;

And if it's the row itself that you're trying to assign, then just use this instead.

selectedItem = this;

And if the variable is undefined, then it is likely that there has not yet been a click. So you should check before trying to remove.

function deleteRow() {
  if (selectedItem) {
    selectedItem.parentElement.removeChild(selectedItem); 
  }
}