Remove the object's sibling on click In my program below I am getting the parent node game 1 and then removing one of the two child nodes, depending on which one is clicked. I currently have two event listeners, with two separate functions for removing one child vs the other. It doesn't feel very dry to me, and I think I could benefit from having someone skilled in JS take a look at this and show me how this could be more easily accomplished.

var firstWinner = document.getElementById('game1');

function removefirst() {
    firstWinner.removeChild(firstWinner.childNodes[0]);
}

function removeSecond() {
    firstWinner.removeChild(firstWinner.childNodes[1]);
}

var gameOneNodes = document.getElementById('game1').childNodes;
gameOneNodes[1].addEventListener('click', removefirst, false)
gameOneNodes[0].addEventListener('click', removeSecond, false)
You should define one click handler that removes all siblings of the clicked element.  That is, remove all children of the parent, except the target of the event itself.



document.getElementById('game1').addEventListener('click', function(event) {
    // Remove all siblings of the clicked element
    for (var c = this.childNodes.length - 1; c &gt;= 0; c--) {
        if (this.childNodes[c] != event.target) {
            this.removeChild(this.childNodes[c]);
        }
    }
});
&lt;div id="game1"&gt;
  &lt;button&gt;Alpha&lt;/button&gt;
  &lt;button&gt;Bravo&lt;/button&gt;
  &lt;button&gt;Charlie&lt;/button&gt;
  &lt;button&gt;Delta&lt;/button&gt;
&lt;/div&gt;




You could also iterate this way, but there's an awkward c--:

for (var c = 0; c &lt; this.childNodes.length; c++) {
    if (this.childNodes[c] != event.target) {
        this.removeChild(this.childNodes[c--]);
    }
}