Question

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

上午10点

上午11时00

下午12点00

任何帮助都将不胜感激。

你可以找到我迄今为止尝试过的小提琴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结构（即将它们放在链接标记内）。但是，你的电话。

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

1 个答案: