如何根據自定義屬性從innerHTML中刪除某些元素？

Question

無論如何刪除鏈接從innerHTML自定義屬性data-promo值是1？按鈕的輸出結果onclick應該是：

10:00

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

你可以做的是結合.querySelectorAll()使用CSS選擇器，即一個引用您的自定義屬性（即[data-promo="1"]），並使用.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結構（即將它們放入鏈接標記中）。但是，你的電話。