javascript - 如何根据自定义属性从 innerHTML 中删除某些元素？

Question

是否可以从 innerHTML 中删除自定义属性 data-promo 值为 1 的链接？按钮的输出结果onclick应该是:

上午 10:00

上午 11:00

中午 12:00

如有任何帮助，我们将不胜感激。

您可以找到我迄今为止尝试过的 Fiddle here .

function day(item) {
  var data = item.getAttribute('data-value');
  document.getElementById('time-wrap').innerHTML = document.getElementById(data).innerHTML;
}

<div style="display:none;" id="2017_12_9">
  <a class="even" onclick="times(this)" data-promo="0">10:00am</a><br>
  <a class="even" onclick="times(this)" data-promo="1">10:30am</a><br>
  <a class="even" onclick="times(this)" data-promo="0">11:00am</a><br>
  <a class="even" onclick="times(this)" data-promo="1">11:30am</a><br>
  <a class="even" onclick="times(this)" data-promo="0">12:00pm</a><br>
</div>
<button class="datecurrentselected" onclick="day(this)" data-value="2017_12_9">Dec 09, 2017</button>
<div id="time-wrap"></div>

Answer 1

您可以使用 CSS 选择器，即引用您的自定义属性(即 [data-promo="1"] )并结合 .querySelectorAll() 的选择器并使用 .forEach() 遍历返回的列表删除那些匹配选择器的元素。例如:

function day(item) {
  var data = item.getAttribute('data-value');
  document.getElementById('time-wrap').innerHTML = document.getElementById(data).innerHTML;
  document.querySelectorAll('[data-promo="1"]').forEach(function(element) {
    element.parentNode.removeChild(element);
  });
}

<div style="display:none;" id="2017_12_9">
  <a class="even" onclick="times(this)" data-promo="0">10:00am</a><br>
  <a class="even" onclick="times(this)" data-promo="1">10:30am</a><br>
  <a class="even" onclick="times(this)" data-promo="0">11:00am</a><br>
  <a class="even" onclick="times(this)" data-promo="1">11:30am</a><br>
  <a class="even" onclick="times(this)" data-promo="0">12:00pm</a><br>
</div>
<button class="datecurrentselected" onclick="day(this)" data-value="2017_12_9">Dec 09, 2017</button>
<div id="time-wrap"></div>

有一件事让我有点困扰，那就是 <br> <a> 之外的标签标签，有效地创建空行。你可以使用一些有创意的 CSS 技巧或 Javascript 来删除它们，但我建议调整你的 HTML 结构(即将它们放在链接标签中)。但是，您的电话。