从具有不同id的div中删除指定的主元素

Question

我想用“X”按钮删除元素，但这些元素有不同的ID并进入无限。我应该怎么做？我想删除主要的“Div”。防爆。 “blacklisttab1”，因为我想关闭它，但我不能，因为它有不同的ID。

我知道，在我最近的“closefunc”函数中删除了更多的元素。但我想只删除一个指定的元素。

我只是想尝试更多的方法，但我被困在这里，我决定寻求帮助。

function closetab() {
  var tab = document.getElementById("listtab");
  tab.parentElement.removeChild(tab);
}

function closefunc() {
  var blackitems = document.getElementsByClassName("blacklisttab");
  for (var i = 0; i <= blackitems.length; i++) {
    var tab = document.getElementById("blacklisttab" + i);
    tab.remove(tab)

.fragment {
  font-size: 12px;
  font-family: tahoma;
  height: 20px;
  border: px solid blue;
  color: blue;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
}

.fragment:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}

#close {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

.bl {
  padding-bottom: 5px;
}

.closebtn {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}


#closebutn {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab0">
  <div class="col-md-10 bordered selectborder fragment" id="bltab">
    <span onclick="closetab();" class="closebtn">x</span>
    <div class="blacklistitem" id="blacklistitem">
      <p class="blacklistitempgraph" id="blacklistitempgraph0">DNFB</p>
    </div>
  </div>
</div>
<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab1">
  <div class="col-md-10 bordered selectborder fragment" id="bltab">
    <span onclick="closetab();" class="closebtn">x</span>
    <div class="blacklistitem" id="blacklistitem">
      <p class="blacklistitempgraph" id="blacklistitempgraph1">HIM</p>
    </div>
  </div>
</div>
<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab2">
  <div class="col-md-10 bordered selectborder fragment" id="bltab">
    <span onclick="closetab();" class="closebtn">x</span>
    <div class="blacklistitem" id="blacklistitem">
      <p class="blacklistitempgraph" id="blacklistitempgraph2">CFOs</p>
    </div>
  </div>
</div>
<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab3">
  <div class="col-md-10 bordered selectborder fragment" id="bltab">
    <span onclick="closetab();" class="closebtn">x</span>
    <div class="blacklistitem" id="blacklistitem">
      <p class="blacklistitempgraph" id="blacklistitempgraph3">Reduce</p>
    </div>
  </div>
</div>

Answer 1

我建议，在评论中澄清之后你似乎想要在点击后代.blacklisttab元素时删除祖先.closebtn元素：

// using a named function, in this case using Arrow syntax;
// passing in the event object ('e') from the (later)
// EventTarget.addEventListener() method:
const removeTab = (e) => {

  // retrieving the element that was clicked:
  let affected = e.target,

  // finding the closest ancestor element matching
  // the supplied CSS selector:
      ancestor = affected.closest('.blacklisttab');

  // removing that element from the DOM, using
  // ChildNode.remove():
  ancestor.remove();
}

// using document.querySelectorAll() to find all elements
// matching the supplied CSS selector, and calling
// NodeList.forEach() to iterate over that NodeList:
document.querySelectorAll('.closebtn').forEach(

  // using Arrow function expressions to bind the
  // removeTab() function (note the deliberate lack
  // of parentheses) as the event-handler for the
  // 'click' event:
  (close) => close.addEventListener('click', removeTab)
);

const removeTab = (e) => {
  let affected = e.target,
      ancestor = affected.closest('.blacklisttab');

  ancestor.remove();
}

document.querySelectorAll('.closebtn').forEach(
  (close) => close.addEventListener('click', removeTab)
);

.fragment {
  font-size: 12px;
  font-family: tahoma;
  height: 20px;
  border: px solid blue;
  color: blue;
  display: block;
  box-sizing: border-box;
  text-decoration: none;
}

.fragment:hover {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
}

#close {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

.bl {
  padding-bottom: 5px;
}

.closebtn {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

#closebutn {
  float: right;
  display: inline-block;
  padding: 1px 5px;
  font-weight: bold;
  cursor: pointer;
}

<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab0">
  <div class="col-md-10 bordered selectborder fragment">
    <span class="closebtn">x</span>
    <div class="blacklistitem">
      <p class="blacklistitempgraph">DNFB</p>
    </div>
  </div>
</div>
<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab1">
  <div class="col-md-10 bordered selectborder fragment">
    <span class="closebtn">x</span>
    <div class="blacklistitem">
      <p class="blacklistitempgraph">HIM</p>
    </div>
  </div>
</div>
<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab2">
  <div class="col-md-10 bordered selectborder fragment">
    <span class="closebtn">x</span>
    <div class="blacklistitem">
      <p class="blacklistitempgraph">CFOs</p>
    </div>
  </div>
</div>
<div class="col-md-10 col-md-offset-1 bordered bl blacklisttab" id="blacklisttab3">
  <div class="col-md-10 bordered selectborder fragment">
    <span class="closebtn">x</span>
    <div class="blacklistitem">
      <p class="blacklistitempgraph">Reduce</p>
    </div>
  </div>
</div>

请注意，在任何情况下，您都不应该使用相同的id作为多个元素。考虑到这一点，我已经从你的元素中删除了重复的ids，以便留下有效的HTML。

参考文献：

• Arrow functions。
• ChildNode.remove()。
• Element.closest()。
• EventTarget.addEventListener()。
• NodeList.prototype.forEach()。