时间戳

首页 > 解决方案 > 在 javascript 中删除特定标签及其内容

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

问题描述

如何在 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>

标签： javascripthtmlreplacetags

解决方案

这是在 html 页面上清除或删除div 内容的示例，您可以选择哪一个是合适的，您也可以计算它们，我为您制作了这个示例，您可以单击每个 div 内容，然后单击它会删除内容. 如果您单击它还有一个按钮，它将计算页面上的所有div清除其内容，然后完全删除其内容以及其中的子标签子标签。

保持这个脚本序列很重要，它会以其他方式给出错误，并且脚本必须位于 div 标签下，以便它可以读取 divs 。

我已经使用 sweetalert js 库来设置消息警报模式的样式，并且我在页面中使用了 j 查询库，请检查 snip 代码。

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

编辑：坦率地说，在对 snip 进行测试之后，我注意到计数器也给出了隐藏 div 标签的总数，所以我假设这些总数也在计算 snip 工具窗口甚至隐藏的标签。

祝你好运

<!DOCTYPE html>
<html>



<!-- must use in order to make XP Themes render -->
<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>

推荐阅读