从另一个元素上单击删除子级

Question

我正在使用Vanilla JS ES5构建它。

我用不同的数据构建气泡，因此当您单击它时，我会更改位置并将数据附加到HTML块中。

挑战在于当单击“后退”按钮时能够移除孩子。 （实际上，不仅按钮需要触发该事件，而且当我们在浏览器中实际单击按钮“后退”时，它应具有与该实例中的按钮相同的功能。

我认为现在存在一些“范围”问题？单击后退按钮添加节点后，找不到删除该节点的方法。

这是codepen：https://codepen.io/Aurelian/pen/xyVmgw?editors=0010

这是JS代码：

var equipmentRemove = false;
var backButton = document.querySelector('.pt-mindmap__back-button');
var equipmentList = document.querySelectorAll('.pt-bubble');

equipmentList.forEach(function(item) {
   var equipmentId = parseInt(item.getAttribute('data-equipment-id'), 10);
   var mindMap = document.querySelector('.pt-mindmap');

   if(equipmentRemove) {
        mindMap.removeChild(equipmentBoxNode);
    }

   item.addEventListener('click', function(){

      var obj = dataEquipmentList.find(function(data) { 
          return data.equipmentId == equipmentId;
      });

      if (obj) {

       var equipmentBox = [
         '<div class="equipment-box__outer">',
         '<div class="equipment-box__inner">',

          '<article class="df-product-box">',

                '<header class="df-product-box__header df-product-box__border-bottom">',
                '<div class="text-center block-link">',
                     '<span class="block u_mb--2">RECOMMENDED PRODUCTS</span>',
                     '<h3 class="fs_oak t_color--highlight u_mb--0 u_mt--0">',obj.equipmentId,'. ' ,obj.equipmentTitle,'</h3>',
                '</div>',
                '</header>',

               '<div class="df-product-box__list">',

               obj.productList.map(function(list, index) {
                  return ['<div class="df-product-box__row">',
                  '<div class="df-product-box__row-outer">',
                  '<div class="df-product-box__row-inner">',

                     '<div class="slider">',

                        '<div class="df-product-box__item-number-wrap">',
                           '<span class="df-circle df-circle--mid df-circle--green df-circle--inverse">',list.rowId,'</span>',
                        '</div>',

                        '<div class="df-slide-product__item-list slider__wrapper">',
                        list.toolList.map(function(tool, index) {
                           return ['<div class="df-slide-product__item slider__item">',
                               '<div class="df-slide-product__main-sidebar">',
                                  '<div class="df-slide-product__card">',
                                     '<img class="position-center" src="',tool.toolPicture,'" alt="',tool.toolPictureAlt,'">',
                                  '</div>',
                               '</div>',
                               '<div class="df-slide-product__main-content">',
                                  '<div class="df-slide-product__header">',
                                       '<h3 class="df-slide-product__title"><b>',tool.toolName,'</b> ',tool.toolModelNumber,'</h3>',
                                       '<span class="df-slide-product__sub-title">',tool.toolDescription,'</span>',
                                  '</div>',
                                   '<a href="',tool.toolUrl,'" class="df-slide-product__link"> View Product</a>',
                               '</div>',
                           '</div>'].join("");
                           }).join(""),
                        '</div>',

                     '</div>',

                  '</div>',
                  '</div>',
                  '</div>'].join("");
                  }).join(""),

               '</div>',

         '</article>',

         '</div>',
         '</div>',
      ].join('');

      var equipmentBoxNode = document.createElement('div');
         equipmentBoxNode.setAttribute('class', 'equipment-box');
         equipmentBoxNode.setAttribute('style', 'background: url(' + obj.equipmentMainBgImg + ')');
         equipmentBoxNode.innerHTML = equipmentBox;
         mindMap.appendChild(equipmentBoxNode);

         window.history.pushState('page2', 'Title', '/' + obj.equipmentId + '-' + obj.equipmentTitle);

         // Write HTML with the code
         // Create the equipment box
         // loop over the productList
         // loop over the toolList
         // loop over the keys inside the tool




//          console.log(obj.equipmentId, obj.equipmentTitle, obj.equipmentMainBgImg);

//          obj.productList.forEach(function(list, index) {
//             console.log(list.rowId);
//             list.toolList.forEach(function(tool, index) {
//                console.log(tool);
//                console.log(tool.toolPicture, tool.toolName, tool.toolModelNumber, tool.toolDescription, tool.toolUrl);
//             });

//          });

          //console.log(obj.productList[0].rowId);
          // var mindMap = document.querySelector('.pt-mindmap');
          // mindMap.appendChild(equipmentView);

       } else {
         console.error('Item not found');
       }


    });

})



backButton.addEventListener('click', function() {
   history.back();
   equipmentRemove = true;
   equipmentRemove = false;
})