Remove the image

Rabbit W
Rabbit W used Ask the Experts™
on
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>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018
Commented:
Hi Rabbit, you may need to hide them by default until the image is added, to do this you could use a class "hide" for example like :

.remove.hide{
  display: none;
}

Open in new window


And add the class to them all like :

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

Open in new window

Analyst Developer
Distinguished Expert 2018
Commented:
To show the close button and remove it you have to add the code to the change method that adds the images and remove them like :

$('.thumbnail input:checkbox').on('change', function() {
        var elm_class= $(this).attr('class');

        if (this.checked) {
          $('#compare-box-products').slideDown();
          $('.empty-border:first').parent().find('.remove').removeClass('hide');   //<<========== This line will remove the class then shows the button
          $('.empty-border:first').replaceWith($('.img-' + elm_class)[0].outerHTML);
        } else {
          var img = $('.compare-image-container .img-'+elm_class);
          img.parent().find('.remove').addClass('hide');   //<<========== This line will add the class then hide the button
          img.replaceWith('<div class="empty-border"> </div>');
        }

        if( $('.thumbnail input:checkbox:checked').length === 0){
          $('#compare-box-products').slideUp();
        }
});

Open in new window

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018
Commented:
Then the remove event could be simply a call to the unselect event that is already working, something like :

$('body').on('click', '.remove', function(){
         var class_name = $(this).parent().find('img').attr('class').split('-')[1];
        
        $('.'+class_name).click();
});

Open in new window


Here is a working sample :

https://codepen.io/acharki-zakaria/pen/MZvZPd

Author

Commented:
Thank you very much Zakaria! We need more experts like you!
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
You're welcome Rabbit, Glad I could help.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial