Question

我有一个HTML集合，我希望在单击集合中的第二个项目时删除项目0-2和项目19-28。我在这里缺少什么？

//Add on OnClick command to the second element of the HTML collection.
document.getElementsByClassName("esg-filterbutton")[1].addEventListener("click", myFunction);

//Remove elements 0-2 and 19-28 from the collection.
function myFunction(){
  while (i<3 && i>18 && i<29){
  .esg-filterbutton.remove();
 }
}

谢谢，

乔纳森

Answer 1

您似乎忘记了实际引用该集合，您的循环也无效。

此代码应该按您的要求执行：

document.getElementsByClassName("esg-filterbutton")[1].addEventListener("click", myFunction);


var filters = document.getElementsByClassName("someClassName");
//Remove elements 0-2 and 19-28 from the collection.
function myFunction(){
 for (var i = 0;i<29; i++){
  if (i === 3) { // Skip elements 3 to 18
    i = 19;
    continue;
  }
  filters[i].remove();
 }
}

Answer 2

我的回答删除了元素0-2和12-14 ...看看是否有助于你

提示：点击＆＃39;过滤器＆＃39;按钮和打开控制台以查看结果

＆＃13;

//Add on OnClick command to the second element of the HTML collection.
document.getElementById("esg-filterbutton").addEventListener("click", myFunction);

//Remove elements 0-2 and 12-14 from the collection.
function myFunction() {
  var elementArray = document.getElementsByClassName('filter');
  var reducedElementArray = [];

  for (var index = 0; index < elementArray.length; index++) {
    if (!(index >= 0 && index <= 2) &&
      !(index > 11 && index < 15)) {
      reducedElementArray.push(elementArray[index]);
    }
  }

  for (var index = 0; index < reducedElementArray.length; index++) {
    console.log(reducedElementArray[index]);
  }
}

＆＃13;

<ul>
  <li class="filter">1</li>
  <li class="filter">2</li>
  <li class="filter">3</li>
  <li class="filter">4</li>
  <li class="filter">5</li>
  <li class="filter">6</li>
  <li class="filter">7</li>
  <li class="filter">8</li>
  <li class="filter">9</li>
  <li class="filter">10</li>
  <li class="filter">11</li>
  <li class="filter">12</li>
  <li class="filter">13</li>
  <li class="filter">14</li>
</ul>
<button id="esg-filterbutton">Filter</button>

＆＃13;

Answer 3

为了避免对函数中的范围进行硬编码的问题，可以通过编程方式使用一些辅助函数来构建范围。我已经尝试了一种函数式编程方法来解决这个问题。

对于此示例，我们将使用范围0-2和5-6。

var ranges = ['0-2', '5-6'];

首先，将getElementsByClassName替换为querySelectorAll。这将允许我们使用静态节点列表而不是实时节点列表。

var divs = document.querySelectorAll(".esg-filterbutton");

单击第二个项目时，将范围传递到myFunction。

divs[1].addEventListener("click", myFunction.bind(this, ranges));

getBounds返回范围的上限和下限。

function getBounds(str) {
  return str.split('-').map(Number);
}

createRange使用下限和上限返回单个填充范围。

function createRange(range) {
  var bounds = getBounds(range), out = [];
  for (var i = bounds[0]; i <= bounds[1]; i++) out.push(i);
  return out;
}

combineRanges使用concat将多个范围连接在一起。

function concat() {
  return function (p, c) {
    return p.concat(c);
  }
}

function combineRanges(arr) {
  return arr.reduce(concat());
}

getArrayRange和formatRanges创建要连接的范围。

function getArrayRange(createRange) {
  return function (el) {
    return createRange(el);
  }
}

function formatRanges(ranges) {
  return ranges.map(getArrayRange(createRange));
}

最后removeElementFrom返回要在myFunction中使用的函数。

function removeElementFrom(arr) {
  return function (el) {
    arr[el].remove();
  }
}

最后，myFunction接受ranges作为参数，使用上述函数组合它们，然后删除这些范围内的每个元素。

function myFunction(ranges) {
  var arr = combineRanges(formatRanges(ranges)).forEach(removeElementFrom(divs));
}

DEMO。点击＆＃34; 1＆＃34;删除ranges数组中包含的元素。

Answer 4

如果您将集合视为数组，请使用.splice(index,howmanyElements)方法删除元素列表。如果您不检查任何其他详细信息，则循环可能会导致性能问题，避免循环

HTML集合 - 在While循环期间删除元素

4 个答案: