Question

如何在javascript中删除div标签及其内容？

我尝试了以下脚本，但是只删除了标签并保留了内容。

var res, html = document.getElementById('source').value;
res = html.replace(/(<div[^>]+>|<div>|<\/div>)/g, "");
document.getElementById('result').innerHTML = res;

textarea {
  width: 100%;
  height: 120px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .3);
}

<textarea id="source">
  <p>
      <input type="text"/>
      <div class="parent"><div>inner01</div><div>inner02</div></div>
      <span></span>
  </p>
</textarea>
<textarea id="result"></textarea>

Answer 1

假设div是实际字符串，请尝试使用此正则表达式：

<div.*<\/div>

点是任何单个字符：.
后接星号巫婆的是零个或多个实例，前者为* *
并且为了解释正斜杠，从字面上用反斜杠将其转义：\

* 一个加号：+也足够了-一个或多个实例的优先级。

var res, html = document.getElementById('source').value;
res = html.replace(/<div.*<\/div>/g, "");
document.getElementById('result').innerHTML = res;

textarea {
  width: 100%;
  height: 120px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .3);
}

<textarea id="source">
  <p>
      <input type="text"/>
      <div class="parent"><div>inner01</div><div>inner02</div></div>
      <span></span>
      <div class="parent"><input></div>
  </p>
</textarea>
<textarea id="result"></textarea>

注意： 添加了额外的div，以说明已正确删除了多个实例，并且没有删除{{1 }}“标签”。

Answer 2

编辑：epascarello指出我是个白痴，因此至少在此示例中，这应该可以接受：

HTML：

<textarea id="source">
  <p>
    <input type="text">
    <div id="parent"><div>inner01</div><div>inner02</div></div>
    <span></span>
  </p>
</textarea>
<textarea id="result"></textarea>
<button onclick="removeDiv()">
Click me to remove div!
</button>

JS：

function removeDiv() {
  var string = document.getElementById("source").value;
  var s1 = string.split("<div")[0];
  var s2 = string.split("</div>");
  string = s1 + s2[s2.length-1];
  document.getElementById("result").value = string;
}

问题：这将删除第一个开始div标签和最后一个关闭div标签之间的所有内容，因此，如果您想在两者之间保留一些内容，被删除。示例：

<p>
  <div>Some stuff</div>
  <span>Stuff to keep</span>
  <div>Some other stuff</div>
</p>

最终将显示为：

<p>
</p>

因此，并非在所有情况下都有效。

Answer 3

这是示例，用于html页面上的清除或删除 div内容，您可以选择合适的一个，也可以对其进行计数，我为您制作了此示例，您可以在其中单击每个div内容，并且每次单击都会删除内容。如果单击它，还会有一个按钮，它将计数页面上的所有 div 清除其内容，然后完全删除 >其内容以及 sub 标签孩子的内部。

重要的是要保持此脚本序列的其他方式以使其出错，并且脚本必须位于div标签下才能读取div。

我还使用了sweetalert js库来设置消息警报模式的样式，我也使用了页面内的j查询库，请检查代码段。

注意：您的源示例包含在我的代码中，并且通过单击在div上将清除内容，并单击< / strong>上的按钮，它将清除并删除，我只留下一个以避免删除，因此您可以进行调整并了解它是如何工作的。

编辑：坦率地说，在snip上测试之后，我注意到计数器也提供了隐藏div标签的总数，因此假设这些总数也在计算snip工具窗口，即使是隐藏的窗口。

祝你好运

<!DOCTYPE html> <html>  <meta HTTP-EQUIV="MSThemeCompatible" content="Yes" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <head> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> </head> <body> <div id="unknown_id_Number"> <textrea id="unknown_idtxtbox"> <p> <input type="text"/> <div class="parent"><div>inner01</div><div>inner02</div></div> <span></span> </p> </textarea> <textarea id="result"></textarea> </div> <div id="div6"> <textrea> <p> <input type="text"/> <div class="parent"><div>inner01</div><div>inner02</div></div> <span></span> </p> </textarea> <textarea id="result"></textarea> </div> <div id = "div1" value="i am div content" style= "width:200px;height:70px;background:orange;text-align:center;padding:5%;color:white;"> i am content of div1 </div> <div id = "#div2" value="txt2" style= "width:200px;height:70px;background:pink;text-align:center;"> i am content of div2 </div> <div id = 'div3' value="txt3" style= "width:200px;height:70px;background:green;text-align:center;"> i am content of div3 </div> <button onclick="removealldiv()">Click to remove all div contents</button> <script> function removealldiv(){ // insert total divs on divs variable var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ //do something to each div like divs[i].innerHTML = " "; divs[i].remove(); if ( i = i ) { swal("i have clear then removed about "+ i +" div's on this page ",'success'); } } } </script> <script> $("div").click( function(){ var name = $(this).attr("id"); swal({ title: "Are you sure you want to delete the content of div id = " +name+"?", text: "if you click delete , the content of your div will be removed", icon: "warning", buttons: true, dangerMode: true, }) .then((willDelete) => { if (willDelete) { swal("Poof! your div content is cleared now ", { icon: "success", }); if ( name = name ) { $(this).text(' '); } } else { swal("your div content is safe , the content will remain on page "); } }); }); </script> </body> </html>

在javascript中删除特定标签及其内容

3 个答案: