Question

如果点击basket One div，我想删除basket Two div，反之亦然。

var basketClass = document.getElementsByClassName("basketClass");
var basketOne = document.getElementById("basketOne");
var basketTwo = document.getElementById("basketTwo");

for (var i = 0; i < basketClass.length; i++) {
  basketClass[i].addEventListener('click', function(event) {
    if (event.target === basketOne || basketTwo) {
      //removeSibling(basketOne||basketTwo);
      //want to remove basketone if basketTwo is clicked and vice versa
    }
  })
};

<div id="basketOne" class="basketClass">Basket One </div>
<div id="basketTwo" class="basketClass">Basket Two </div>

Answer 1

使用event.target属性获取点击的元素并进行必要的比较。
您可以使用 ChildNode.remove() 。
这个条件不合适：

if (event.target === basketOne || basketTwo) {...}
                                  ^

在那种情况下缺少左操作数：

if (event.target === basketOne || event.target === basketTwo) {...}

var basketClass = document.getElementsByClassName("basketClass");
var basketOne = document.getElementById("basketOne");
var basketTwo = document.getElementById("basketTwo");

for (var i = 0; i < basketClass.length; i++) {
  basketClass[i].addEventListener('click', function(event) {
    if (event.target === basketOne) {
      basketTwo.remove();
    }

    if (event.target === basketTwo) {
      basketOne.remove();
    }
  })
};

div {
  padding: 10px;
  border: 1px dashed green;
  margin: 5px;
  cursor: pointer
}

<div id="basketOne" class="basketClass">Basket One </div>
<div id="basketTwo" class="basketClass">Basket Two </div>

Answer 2

假设删除div意味着隐藏div：

var basketClass = document.getElementsByClassName("basketClass");
var basketOne = document.getElementById("basketOne");
var basketTwo = document.getElementById("basketTwo");

for (var i = 0; i < basketClass.length; i++) {
  basketClass[i].addEventListener('click', function(event){
    if(event.target === basketOne){
      basketOne.style.display = "block";
      basketTwo.style.display = "none";
    }else if(event.target === basketTwo){
      basketTwo.style.display = "block";
      basketOne.style.display = "none";
    }
  })
};

Answer 3

如果你真的删除了div，你就不能以某种方式重复使用它。因此，假设您的意思是“隐藏”，而不是“从DOM中删除”。

您不需要实际检查点击的内容：

＆＃13;

var basketClass= document.getElementsByClassName("basketClass");

for (var i = 0; i < basketClass.length; i++) {
  basketClass[i].addEventListener('click', function(event){
    click(event);
    this.style.display = 'block';
  })
};

function click(event) {
  for (var i = 0; i < basketClass.length; i++) {
    basketClass[i].style.display = 'none';
  }
}

＆＃13;

<div class="basketClass">One</div>
<div class="basketClass">Two</div>

＆＃13;

这只是假设您可以将所有内容设置为不可见，然后再将实际单击的事件再次显示为可见。这可以扩展到无限数量的篮子。

Answer 4

将两个篮子元素放入一个数组中。然后，只需要一个简单的三元if语句，该语句以数组中的右元素为目标即可删除。

var parent = document.getElementById("parent"); // Get reference to basket parent

// Put both basket elements into an array
var baskets = Array.prototype.slice.call(document.querySelectorAll(".basketClass")); 

// Loop over the array
baskets.forEach(function(basket) {
  // Set up click event handler
  basket.addEventListener('click', removeBasket);
});

function removeBasket(event){
    // Remove the other element in the array
    parent.removeChild(this === baskets[0] ? baskets[1] : baskets[0]);
    // Remove the event binding because target basket is now removed.
    this.removeEventListener("click", removeBasket); 
}

<div id="parent">
  <div id="basketOne" class="basketClass">Basket One </div>
  <div id="basketTwo" class="basketClass">Basket Two </div>
</div>

Answer 5

假设您实际上并不想从DOM中删除节点但只是隐藏它，您可以尝试：

＆＃13;

var basketOne = document.getElementById("basketOne"),
  basketTwo = document.getElementById("basketTwo");

[].forEach.call(document.getElementsByClassName('basketClass'), function(el) {
  el.addEventListener('click', function(e) {
    basketOne.style.display = e.target === basketOne ? 'block' : 'none';
    basketTwo.style.display = e.target === basketTwo ? 'block' : 'none';
  })
});

＆＃13;

<div class="basketClass" id="basketOne">Basket ONE</div>
<div class="basketClass" id="basketTwo">Basket TWO</div>

＆＃13;

注意：getElementsByClassName会返回一个类似于数组的对象，因此您可以使用forEach进行迭代。

如何删除未单击的div

5 个答案: