regardless of selected node, always use the li node for selection

voting.html

@@ -327,7 +327,7 @@ <h2>Your RCV selection:</h2>
                 if (event.target.closest("li") && event.target.closest("li").classList.contains("unselected")) {
                     console.log("Running RCV eventListener:");
                     // Create a new selected item with a remove button
-                    const selectedText = event.target.textContent;
+                    const selectedText = event.target.closest("li").textContent;
                     const newItem = document.createElement("li");
                     newItem.classList.add("flex-item"); // Apply a class for styling
 
@@ -339,7 +339,7 @@ <h2>Your RCV selection:</h2>
                     newButton.addEventListener("click", function (e) {
                         let itemName = e.target.parentNode.textContent.trim().replace(/\s+remove$/, "");
                         e.target.parentNode.classList.remove("selected");
-                        console.log("Remove button eventListener: removing '" + itemName + "'");
+                        console.log("Remove button eventListener: removing '" + itemName + "' (parentNode=" + e.target.parentNode.innerText + ")");
                         // remove it from sortableList
                         e.target.parentNode.remove();
                         // add to choiceList
@@ -373,8 +373,8 @@ <h2>Your RCV selection:</h2>
                     // ... and append that to the bottom of sortableList
                     sortableList.appendChild(newItem);
 
-                    // Remove the selected item from the first list
-                    event.target.remove();
+                    // Remove the containing li for the selected item from the first list
+                    event.target.closest("li").remove();
 
                     // Initialize the sortable list
                     initSortableList(document.getElementById("sortableList"));
@@ -387,30 +387,29 @@ <h2>Your RCV selection:</h2>
             let selectedCount = 0;
             choiceList.addEventListener("click", (event) => {
                 console.log("Running plurality eventListener:");
-                const listItem = event.target;
-                const itemText = listItem.textContent;
-                const itemIndex = Array.from(choiceList.children).indexOf(listItem);
                 // Note - one can (correctly) select the circle, or svg, or text,
                 // or the li
-                const theLi = listItem.closest("li");
-                if (theLi.classList.contains("unselected")) {
+                const listItem = event.target.closest("li");
+                const itemText = listItem.textContent;
+                const itemIndex = Array.from(choiceList.children).indexOf(listItem);
+                if (listItem.classList.contains("unselected")) {
                     if (selectedCount < thisContestValue.max) {
                         // Select the item (up to maxSelection selections allowed)
-                        theLi.classList.add("selected");
-                        theLi.classList.remove("unselected");
+                        listItem.classList.add("selected");
+                        listItem.classList.remove("unselected");
                         // get the svg (first child) and set fill to on (black)
-                        theLi.firstElementChild.style.fill = "black"
+                        listItem.firstElementChild.style.fill = "black"
                         selectedCount++;
                         console.log("selected " + itemIndex + ", " + itemText);
                     } else {
                         // Overvote
                         console.log("rejected (overvote) - ignoring " + itemIndex + ", " + itemText);
                     }
-                } else if (theLi.classList.contains("selected")) {
+                } else if (listItem.classList.contains("selected")) {
                     // Deselect the item
-                    theLi.classList.add("unselected");
-                    theLi.classList.remove("selected");
-                    theLi.firstElementChild.style.fill = selectBackgroundColor;
+                    listItem.classList.add("unselected");
+                    listItem.classList.remove("selected");
+                    listItem.firstElementChild.style.fill = selectBackgroundColor;
                     selectedCount--;
                     // get the svg (first child) and set fill to off
                     console.log("de-selected " + itemIndex + ", " + itemText);