Question

在我的下面的代码中，我使用java脚本创建了一个div。当我单击按钮时， div 会重复显示。我该怎么做才能显示一次并清除。

 <html>
<head>
<title>Div tag using Javascript
</title>
<!--<link href="divtag1.js" type="text/javascript">-->
<style>
body{
    background:#00ffff;
}
.myclass{
    background:#30a0d3;
    color:#123456;
    position:relative;
    left:300px;
    right:300px;
    top:150px;
    height:100px;
    width:700px;
    border:2px solid #000000;
    border radius:5px;
    padding:20px;
    margin:50px;
}

</style>

<script>
function myfunction(){
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
var oldChild=element.removeChild(child)
element.removeChild(child);
}
</script>

</head>
<body>
<div>
<input type="button" value="Click Me!!" onclick="return myfunction();"></div>
</body>
</html>

非常感谢任何建议。

Answer 1

为您创建的div提供唯一的id。这样，您就可以使用id 解析DOM ，并且正确删除它。

示例：

var mydiv = document.createElement("div"); mydiv.setAttribute("id", "deleteme");//set the ID to "deleteme"

现在你可以引用创建的DIV，并用它做你想做的事情（包括删除它）。

Answer 2

以下代码是问题所在。孩子没有定义

var oldChild=element.removeChild(child)
element.removeChild(child);

您需要有一种方法来引用您插入的元素。如果你只是使用标准的Javascript，也就是没有jQuery，那么分配id是最好的选择。

Answer 3

给你使用javascript创建的div并使用

删除它

$('#yourdivid').html(''); // this will clear contents of your division

Answer 4

<html>
<head>
<title>Div tag using Javascript
</title>
<!--<link href="divtag1.js" type="text/javascript">-->
<style>
body{
    background:#00ffff;
}
.myclass{
    background:#30a0d3;
    color:#123456;
    position:relative;
    left:300px;
    right:300px;
    top:150px;
    height:100px;
    width:700px;
    border:2px solid #000000;
    border radius:5px;
    padding:20px;
    margin:50px;
}

</style>

<script>
var once= false;
function myfunction(){
    if(once==true){
        return;
    }
var div = document.createElement('div');
div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
div.style.color = 'red';
// better to use CSS though - just set class
div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
document.body.appendChild(div);
once= true;
}
</script>

</head>
<body>
<div>
<input type="button" value="Click Me!!" onclick="return myfunction();"></div>
</body>
</html>

如何删除使用javascript创建的div

4 个答案: