Remove the image

In the compare products, I want to "The remove x "  to show  when images are added. Below is the coding. How to fix it? Thank you!

 <script type="text/javascript">
            function removeParent() {
                this.parentNode.remove();
            }
            var buttons = document.getElementsByClassName('remove');
            Array.prototype.forEach.call(buttons, function(d, i) {
                d.addEventListener('click', removeParent);
            });
        </script>



<div id="compare-box">
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
      <div class="compare-image-container col-xs-3">
        <div class="empty-border"> </div>
         <button class="remove">X</button>
      </div>
    </div>
    <div id="compare-box-row" class="col-xs-9">

    </div>
  </div>

Select allOpen in new window