似乎无法弄清楚如何正确删除 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>