僅在單擊特定父級時刪除內部元素的實例

Question

我有一系列元素，當單擊其中一個框時，我想要它，該特定元素上的內框消失。 我一直在玩它，但無法讓它工作。 我想知道我是否應該在代碼中使用this ？

在下面的示例中，我想要它，因此當您單擊其中一個紅色框時，該特定框的內部黃色框會消失，但只有被單擊的紅色框內的黃色框會消失。

我需要在不向 HTML 添加任何類或 ID 的情況下完成此操作。

代碼筆： 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

這應該做的工作

 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

您可以在偵聽器內部進行，而不是全局選擇內部元素。 然后使用setAttribute 方法將顯示屬性更改為“無”。

 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>