仅在单击特定父级时删除内部元素的实例

Question

I have a series of elements where I'd like it when one of the boxes is clicked the inner box on that specific element disappears. I've been playing around with it but can't get it work. I'm wondering if I should be using this in the code?

In the example below I want it so when you click one of the red boxes, that particular box's inner yellow box disappears, but only the yellow box inside the red box that is clicked.

I need to do it with without adding any more classes or IDs to the HTML.

CodePen: https://codepen.io/emilychews/pen/dyNPwEx

 var boxOuter = document.querySelectorAll(".box-outer"), boxInner = document.querySelectorAll(".box-inner"); if (boxOuter) { boxOuter.forEach(function (item) { item.addEventListener("click", function () { // code goes here }); }); }

 body { margin: 0; display: flex; justify-content: center; align-items: center; height: 120vh; }.box-outer { position: relative; width: 10rem; height: 5rem; background: red; margin: 1rem; cursor: pointer; }.box-inner { width: 1rem; height: 1rem; background: yellow; position: absolute; bottom: 0.5rem; right: 0.5rem; }

 <main class="main-wrapper"> <div class="box-outer"> <div class="box-inner"></div> </div> <div class="box-outer"> <div class="box-inner"></div> </div> <div class="box-outer"> <div class="box-inner"></div> </div> </main>

Answer 1

This should do the job

 var boxOuter = document.querySelectorAll(".box-outer"), boxInner = document.querySelectorAll(".box-inner"); if (boxOuter) { boxOuter.forEach(function (item) { item.addEventListener("click", function () { //This will delete everything inside the box... Clear all child nodes this.innerHTML = ''; //Hide inner child //this.children[0].style.visibility = 'hidden'; // code goes here }); }); }

 body { margin: 0; display: flex; justify-content: center; align-items: center; height: 120vh; }.box-outer { position: relative; width: 10rem; height: 5rem; background: red; margin: 1rem; cursor: pointer; }.box-inner { width: 1rem; height: 1rem; background: yellow; position: absolute; bottom: 0.5rem; right: 0.5rem; }

 <main class="main-wrapper"> <div class="box-outer"> <div class="box-inner"></div> </div> <div class="box-outer"> <div class="box-inner"></div> </div> <div class="box-outer"> <div class="box-inner"></div> </div> </main>

Answer 2

Instead of selecting the inner element globally, you could make this inside the listener. And then use the setAttribute method to change the display property to 'none'.

 var boxOuter = document.querySelectorAll(".box-outer"); if (boxOuter) { boxOuter.forEach(function (item) { item.addEventListener("click", function () { const boxInner = item.querySelector(".box-inner"); // captures the respective box boxInner.setAttribute("style", "display: none;"); // sets the display attribute }); }); }

 body { margin: 0; display: flex; justify-content: center; align-items: center; height: 120vh; }.box-outer { position: relative; width: 10rem; height: 5rem; background: red; margin: 1rem; cursor: pointer; }.box-inner { width: 1rem; height: 1rem; background: yellow; position: absolute; bottom: 0.5rem; right: 0.5rem; }

 <main class="main-wrapper"> <div class="box-outer"> <div class="box-inner"></div> </div> <div class="box-outer"> <div class="box-inner"></div> </div> <div class="box-outer"> <div class="box-inner"></div> </div> </main>