removechild 相关问题

从DOM中删除并返回子节点

removeChild函数真的能彻底删除子节点吗？或者它只是删除指定父节点的子元素？如果它没有真正删除元素，有没有办法

javascript html dom removechild

回答 5 投票 0

我一直在谷歌搜索从 xml 文件中删除孙子。但是，我还没有找到完美的解决方案。这是我的案例：第 1 项文本我一直在谷歌搜索从 xml 文件中删除孙子。但是，我还没有找到完美的解决方案。这是我的案例： <tree> <category title="Item 1">item 1 text <subitem title="subitem1">subitem1 text</subitem> <subitem title="subitem2">subitem2 text</subitem> </category> <category title="Item 2">item 2 text <subitem title="subitem21">subitem21 text</subitem> <subitem title="subitem22">subitem22 text</subitem> <subsubitem title="subsubitem211">subsubitem211 text</subsubitem> </category> </tree> 在某些情况下，我想删除 subitem。在其他情况下，我想删除subsubitem。我知道我可以在当前给定的内容中这样做： import xml.etree.ElementTree as ET root = ET.fromstring(given_content) # case 1 for item in root.getiterator(): for subitem in item: item.remove(subitem) # case 2 for item in root.getiterator(): for subitem in item: for subsubitem in subitem: subitem.remove(subsubitem) 只有当我知道目标节点的深度时，我才能用这种风格编写。如果我只知道要删除的节点的标签名称，我应该如何实现？伪代码： import xml.etree.ElementTree as ET for item in root.getiterator(): if item.tag == 'subsubitem' or item.tag == 'subitem': # remove item 如果我这样做root.remove(item)，它肯定会返回错误，因为 item 不是 root 的直接子项。编辑：我无法安装任何 3rd-party-lib，所以我必须用 xml 来解决这个问题。我终于通过编写递归函数在 xml lib 上完成了这项工作。 def recursive_xml(root): if root.getchildren() is not None: for child in root.getchildren(): if child.tag == 'subitem' or child.tag == 'subsubitem': root.remove(child) else: recursive_xml(child) 通过这样做，该函数将迭代 ET 中的每个节点并删除我的目标节点。 test_xml = r''' <test> <test1> <test2> <test3> </test3> <subsubitem> </subsubitem> </test2> <subitem> </subitem> <nothing_matters> </nothing_matters> </test1> </test> ''' root = ET.fromstring(test_xml) recursive_xml(root) 希望这可以帮助像我这样有限制要求的人.... 要删除 subsubitem 或 subitem 的实例，无论其深度如何，请考虑以下示例（需要注意的是，它使用 lxml.etree 而不是上游 ElementTree）： import lxml.etree as etree el = etree.fromstring('<root><item><subitem><subsubitem/></subitem></item></root>') for child in el.xpath('.//subsubitem | .//subitem'): child.getparent().remove(child) Python 3.10 的更新，因为 getchildren() 不再存在： https://docs.python.org/3/library/xml.etree.elementtree.html#element-objects https://docs.python.org/3/library/xml.etree.elementtree.html#modifying-an-xml-file 请注意，迭代时并发修改可能会导致问题，就像迭代和修改 Python 列表或听写。此脚本将在 3.10 上运行： #!/usr/bin/python import xml.etree.ElementTree as ET def print_xmltree(root): xmlstr = ET.tostring(root, encoding="utf-8", method="xml") print(xmlstr.decode("utf-8")) def recursive_xml(parent, depth): #print(depth * " ", parent.findall('./')) for child in parent.findall('./'): if child.tag == 'subitem' or child.tag == 'subsubitem': parent.remove(child) else: recursive_xml(child, depth + 1) xml_data = """<?xml version="1.0" encoding="UTF-8"?> <tree> <category title="Item 1">item 1 text <subitem title="subitem1">subitem11 text</subitem> <subitem title="subitem2">subitem12 text</subitem> <sibetum title="subitem3">subitem13 text</sibetum> <subsubitem title="subsubitem1">subsubitem211 text</subsubitem> </category> <category title="Item 2">item 2 text <subitem title="subitem1">subitem21 text</subitem> <subitem title="subitem2">subitem22 text</subitem> <subsubitem title="subsubitem1">subsubitem211 text</subsubitem> <sobsobitem title="subsubitem2">wrong tag</sobsobitem> </category> <category title="Item 3">item 3 text </category> </tree>""" #root = ET.parse('test.xml').getroot() # from file root = ET.fromstring(xml_data) # from variable recursive_xml(root, 0) print_xmltree(root) # Note that sobsobitem was forced up in hierachy and that parent tag for subsubitem did not matter (sibetum). wait = input("Press Enter to Exit.") 这将输出： <tree> <category title="Item 1">item 1 text <sibetum title="subitem3">subitem13 text</sibetum> </category> <category title="Item 2">item 2 text <sobsobitem title="subsubitem2">wrong tag</sobsobitem> </category> <category title="Item 3">item 3 text </category> </tree>

python xml removechild

回答 3 投票 0

我正在尝试对输入的文件运行删除功能，但没有任何效果

我目前正在为我的 NFT 市场制作前端，并为我的铸币页面创建功能。我创建了一个更新文件元素，允许用户将图像上传到框中

javascript html dom removechild

回答 1 投票 0

使用addEventListener移除Child

我刚刚学习javascript。在谷歌 Chrome 控制台上测试东西我最终得到了这个： ... 我刚刚学习javascript。在谷歌 Chrome 控制台上测试东西我最终得到了这个： <html> <head></head> <body> <div id="divi"> <button id="butti">Click Me</button> </div> </body> </html> 还有Js： function cBoton (){ var getDiv = document.getElementById("divi"); getDiv.removeChild(getDiv.lastChild); }; var getButton = document.getElementById("butti"); getButton.addEventListener("click", cBoton); 我希望按钮一点击就被删除。 ¿为什么只有在第二次点击后才起作用？ tx！标记中元素的 .lastChild 是 ""（尝试使用 console.log(getDiv.lastChild) 进行澄清）。使用它来确保您正在删除所需的元素： function cBoton() { var getDiv = document.getElementById("divi"); getDiv.removeChild(getButton); }; 第一次单击时，divi的最后一个子节点是包含按钮后空格的文本节点，并且该节点将被删除。第二次单击时，该按钮是最后一个子按钮。无价之宝.. 修改源码； /* .css */ div :nth-child(even){background-color: #f2f2f2} /*.js */ function addDiv() { var para = document.createElement("p"); var node = document.createTextNode('textHere'); // add cell code here para.appendChild(node); var element; element = document.getElementById("div1"); // to add div id recursion element.appendChild(para); } function cBoton (){ var getDiv = document.getElementById("div1"); getDiv.removeChild(getDiv.lastChild); } var getButton = document.getElementById("div1"); getButton.addEventListener("click", cBoton); /* HTML */ <html> <head></head> <body> <button onclick="addDiv()">add</button> <button onclick="cBoton()">Click Me</button> <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 副驾驶更新！您的第一个代码片段需要单击两次才能删除按钮的原因是 DOM（文档对象模型）的结构方式。当您第一次加载页面时，ID 为 divi 的 div 元素只有一个子元素，即按钮元素。但是，当您第一次单击按钮时，由于按钮元素后面有空格或换行符，会在 div 内创建一个文本节点（在 DOM 中被视为子节点）。因此，按钮不再是最后一个子节点，文本节点才是。这就是为什么需要点击两次才能删除按钮。对于您的第二个代码片段，您似乎试图在单击“添加”按钮时向 div 添加一个段落，并在单击“单击我”按钮时删除 div 的最后一个子级。但是，您的代码中有一个错误。您尝试向 div 添加事件侦听器，而不是“Click Me”按钮。这是更正后的版本： function addDiv() { var para = document.createElement("p"); var node = document.createTextNode('textHere'); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); } function cBoton() { var getDiv = document.getElementById("div1"); getDiv.removeChild(getDiv.lastChild); } var getButton = document.getElementById("butti"); // Corrected here getButton.addEventListener("click", cBoton); <html> <head></head> <body> <button id="addButton" onclick="addDiv()">add</button>  <button id="butti" onclick="cBoton()">Click Me</button>  <frameset><legend>recursions</legend> <div id="div1"></div> </frameset> </body> </html> 这应该按预期工作。 “添加”按钮将向 div 添加一个段落，“Click Me”按钮将删除该 div 的最后一个子级。使用 JavaScript 时，请记住始终检查 DOM 的结构和元素的 id。快乐编码！

javascript onclick click addeventlistener removechild

回答 4 投票 0

当我使用Javascript单击删除按钮时，如何从DOM中删除TODO项目列表？

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TODO app</title> </head> <script> function deleteDone(id) { console.log("Deleted todo ID:", id); // Delete the right todo from the list // You will need to give each todo an id, and that should be enough to remove it } function deleteTodo(id) { fetch("http://localhost:3000/todos/" + id, { method: "DELETE", headers: { "Content-Type": "application/json" } }).then(deleteDone) } function getTodoscallBack(data){ console.log(data); var parentElement = document.getElementById("mainArea"); // parentElement.innerHTML = JSON.stringify(data); for(var i=0;i<data.length;++i){ var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML= data[i].title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML= data[i].description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML="Delete"; grandChildren3.setAttribute("onclick","deleteTodo("+data[i].id+")"); childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } } function callbackFn2(res){ res.json().then(getTodoscallBack); } function getData(){ fetch("http://localhost:3000/todos",{ method:"GET", }).then(callbackFn2); } getData(); function parsedResponse(data){ console.log(data); var parentElement = document.getElementById("mainArea"); var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML= data.title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML= data.description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML="Delete"; childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } function callback(res){ res.json().then(parsedResponse); } function onPress(){ var title = document.getElementById("title").value; var description = document.getElementById("description").value; console.log(title,"\n",description); fetch("http://localhost:3000/todos",{ method:"POST", body: JSON.stringify({ title: title, description:description }), headers: { "Content-Type": "application/json" } }).then(callback); } </script> <body> Todo title <input type="text" id="title"></input> <br><br> Todo description <input type="text" id="description"></input> <br><br> <button onclick="onPress()">send todo</button> <div id="mainArea"> </div> </body> </html> 在 TODO 项目的删除功能中，我想删除具有给定 id 的特定待办事项，但我在选择父级（即 div 标签）时遇到困难，其中我存储了标题描述和删除按钮，我通过使用 javascript 发送请求来添加该按钮。问题如何使用removeChild()删除具有id的特定删除按钮的div标签？如何做到这一点？我复制了与您完全相同的代码，并传递了一个伪造的数组来建模待办事项，就像您已经做的那样 const todos = [{ id: 1, title: 'title#1', description: 'description#1' }, { id: 2, title: 'title#2', description: 'description#2' }]; 为了与您的策略保持一致，在创建待办事项的逻辑中，我添加了使用相应的待办事项 id 设置每个删除按钮的 data-id 属性的功能，然后在 deleteDone 函数中我获取了单击的删除使用属性选择器按钮，然后删除使用 div 检索到的整个 closest 容器。 const todos = [{ id: 1, title: 'title#1', description: 'description#1' }, { id: 2, title: 'title#2', description: 'description#2' }]; getTodoscallBack(todos); function deleteDone(id) { console.log("Deleted todo ID:", id); //retrieves the delete button holding the data-id attribute passed const delButton = document.querySelector(`[data-id="${id}"`); //retrieves the element containing that button const todoContainer = delButton.closest('div'); //removes the whole div containing the todo todoContainer.remove(); } function deleteTodo(id) { /* fetch("http://localhost:3000/todos/" + id, { method: "DELETE", headers: { "Content-Type": "application/json" } }).then(deleteDone) */ deleteDone(id); } function getTodoscallBack(data) { console.log(data); var parentElement = document.getElementById("mainArea"); // parentElement.innerHTML = JSON.stringify(data); for (var i = 0; i < data.length; ++i) { var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML = data[i].title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML = data[i].description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML = "Delete"; grandChildren3.setAttribute("onclick", "deleteTodo(" + data[i].id + ")"); //HERE I set the data-id attribute value as data[i].id grandChildren2.dataset.id = data[i].id; childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } } function callbackFn2(res) { res.json().then(getTodoscallBack); } function getData() { fetch("http://localhost:3000/todos", { method: "GET", }).then(callbackFn2); } getData(); function parsedResponse(data) { console.log(data); var parentElement = document.getElementById("mainArea"); var childElement = document.createElement("div"); var grandChildren1 = document.createElement("span"); grandChildren1.innerHTML = data.title; var grandChildren2 = document.createElement("span"); grandChildren2.innerHTML = data.description; var grandChildren3 = document.createElement("button"); grandChildren3.innerHTML = "Delete"; childElement.appendChild(grandChildren1); childElement.appendChild(grandChildren2); childElement.appendChild(grandChildren3); parentElement.appendChild(childElement); } function callback(res) { res.json().then(parsedResponse); } function onPress() { var title = document.getElementById("title").value; var description = document.getElementById("description").value; console.log(title, "\n", description); fetch("http://localhost:3000/todos", { method: "POST", body: JSON.stringify({ title: title, description: description }), headers: { "Content-Type": "application/json" } }).then(callback); } <body> Todo title <input type="text" id="title"> <br><br> Todo description <input type="text" id="description"> <br><br> <button onclick="onPress()">send todo</button> <div id="mainArea"> </div> </body>

javascript html dom removechild http-delete

回答 1 投票 0

使用RemoveChild()和appendChild()过滤项目

我正在用 Vanilla Javascript 和 CSS 构建一个简单的过滤器。当用户单击某个类别时，与该类别不相关的文章具有类 .hide。我还需要删除所有这些文章...

javascript appendchild removechild

回答 1 投票 0

GIF/IMG 未从 DOM 中删除（不是函数？）

所以我正在继续我的测验应用程序，我之前的问题让我深入了解集合如何不能使用 .remove()。我想我的第二个问题是，我最近遇到了几个问题......

javascript html css gif removechild

回答 1 投票 0

使用php删除Xml数据

如何使用 php 删除 xml 上的特定元素 my.xml 这里 ...