似乎無法弄清楚如何正確刪除 childNodes

Question

所以我做了一個小展示。 如果你點擊一個過濾詞，它應該會顯示一個標簽。 到目前為止工作正常。 那是第一個代碼片段。

但是，如果我單擊過濾詞，我希望它再次從文檔中刪除，但我無法弄清楚。 那將是第二個 function。我想遍歷創建的“顯示”元素，如果它們包含“點擊值”區域，則再次刪除它們。 注釋掉的東西不起作用我要么得到 leng 不是 function 的錯誤，要么他“無法讀取 tagFunction 處未定義的屬性 0”。

謝謝您的幫助 ！

 var area = event.target.textContent; var spa = document.createElement("span"); var p = document.createElement("p"); spa.setAttribute('class', 'display'); p.setAttribute("class", "display1") var text = document.createTextNode(area); spa.appendChild(p); p.appendChild(text); p.addEventListener("click", tagFunction); document.getElementById("tags123").appendChild(spa);

 <div class="tags123" id="tags123"> </div>

 function tagFunction() { var area = event.target.textContent; var leng = document.getElementsByClassName("display1"); var tags123 =document.getElementsByClassName("tags123"); for(var ll = 0;ll<leng.length;ll++){ if(leng[ll].innerText.trim().contains(area)){ //tags123.removeChild(leng(ll)); tags123.children[ll].remove(); // leng(ll).remove(); } } }

Answer 1

這就是錯誤。 我必須首先聲明 leng[ll] 元素的 parentNode。

             if(leng[ll].innerText.trim().contains(bereich)){
                 var vader = leng[ll].parentNode;
                 document.getElementById("tags123").removeChild(vader);

Answer 2

兩行有兩個錯誤：

if(leng[ll].innerText.trim().includes(area)){ //should be contains and not includes

leng(ll).remove(); // should be [ ] and not ( )

它將是這樣的：

if(leng[ll].innerText.trim().contains(area)){

leng[ll].remove();

 var area = "text test"; var spa = document.createElement("span"); var p = document.createElement("p"); spa.setAttribute('class', 'display'); p.setAttribute("class", "display1") var text = document.createTextNode(area); spa.appendChild(p); p.appendChild(text); p.addEventListener("click", tagFunction); document.getElementById("tags123").appendChild(spa); function tagFunction() { var area = event.target.textContent; var leng = document.getElementsByClassName("display1"); var tags123 =document.getElementsByClassName("tags123"); console.log(leng); for(var ll = 0; ll <= leng.length; ll++){ if(leng[ll].innerText.trim().includes(area)){ leng[ll].remove(); } } }

 <div class="tags123" id="tags123"> </div>