Question

我正在尝试创建一个按钮，创建可以在按X后关闭的小窗口。我遇到的问题是我只能关闭最后创建的窗口。

＆＃13;

function openNote() {

var base = document.createElement('div'); 
base.id = 'note';
var in_ = document.createElement('div');
in_.id = 'note_in';
var in_2 = document.createElement('div');
in_2.id = 'note_in2';
var ex = document.createElement('div');
ex.id = 'ex';
var ext = document.createTextNode("X");

base.appendChild(in_);
in_.appendChild(in_2);
in_2.appendChild(ex);
ex.appendChild(ext);
document.body.appendChild(base);


document.getElementById('ex').onclick = function(){
var r = document.getElementById('note');
r.parentNode.removeChild(r);
}
}

＆＃13;

#note{
background:#819C9A;
height : 200px;
width : 150px;
border: 2px solid;
border-radius: 25px;
border-color:#49706E;
margin:10px;

}
#note_in{
float:left;
height : 35px;
width : 150px;
background:rgba(255,255,255,0.2);
}
#note_in2
{
float:right;
height : 25px;
width : 25px;
margin:5px;
background:#9DCCCA;
border-radius: 15px;
text-align: center;
cursor:pointer;
}
#ex{

margin-top: 4px;
 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="script.js"></script>

</head>
<body>

<button onClick="openNote();">Press me!</button>


</body>
</html>

＆＃13;

我是JavaScript的新手，非常感谢任何帮助或建议。

Answer 1

您遇到的问题是您创建了多个具有相同ID的dom元素，每页唯一ID。

现在发生的是每次点击“按我！”＃39;创建了新的dom元素，但document.getElementById（＆＃39; ex＆＃39;）只获取树中的第一个元素，因此无论稍后添加多少元素，您始终将事件绑定到第一个元素。

修复选项很少：

使用类并绑定到类。
检查笔记是否已打开，如果已打开，请勿打开其他笔记，或销毁之前的
第3个选项使用已经创建的ex和base变量（示例如下）

＆＃13;

function openNote() {

var base = document.createElement('div'); 
base.id = 'note';
var in_ = document.createElement('div');
in_.id = 'note_in';
var in_2 = document.createElement('div');
in_2.id = 'note_in2';
var ex = document.createElement('div');
ex.id = 'ex';
var ext = document.createTextNode("X");

base.appendChild(in_);
in_.appendChild(in_2);
in_2.appendChild(ex);
ex.appendChild(ext);
document.body.appendChild(base);


ex.onclick = function(){
 
base.parentNode.removeChild(base);
}
}

＆＃13;

#note{
background:#819C9A;
height : 200px;
width : 150px;
border: 2px solid;
border-radius: 25px;
border-color:#49706E;
margin:10px;

}
#note_in{
float:left;
height : 35px;
width : 150px;
background:rgba(255,255,255,0.2);
}
#note_in2
{
float:right;
height : 25px;
width : 25px;
margin:5px;
background:#9DCCCA;
border-radius: 15px;
text-align: center;
cursor:pointer;
}
#ex{

margin-top: 4px;
 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="script.js"></script>

</head>
<body>

<button onClick="openNote();">Press me!</button>


</body>
</html>

＆＃13;

使用第3个选项，您实际上可以跳过所有ID

Answer 2

如同提及的那样，请避免重复元素ID。

其次，您可以在不使用ID或类的情况下删除元素，使用闭包：

function openNote() {
    var base = document.createElement('div'); 
    base.className = 'note';

    var in_ = document.createElement('div');
    in_.className = 'note_in';

    var in_2 = document.createElement('div');
    in_2.className = 'note_in2';

    var ex = document.createElement('div');
    ex.className = 'ex';

    var ext = document.createTextNode("X");

    base.appendChild(in_);
    in_.appendChild(in_2);
    in_2.appendChild(ex);
    ex.appendChild(ext);
    document.body.appendChild(base);

    document.getElementById('ex').onclick = function(){
        base.parentNode.removeChild(base);
    }
}

Answer 3

您正在为多个div分配相同的ID，为它们分配一个类，因此它们都具有相同的行为。

当您单击关闭按钮时，这将使它们全部关闭。如果您想要关闭特定的div，请使用顺序ID。

Answer 4

//global var
var x = 0;

function openNote() {

var base = document.createElement('div'); 
base.id = 'note' + x;
var in_ = document.createElement('div');
in_.id = 'note_in' + x;
var in_2 = document.createElement('div');
in_2.id = 'note_in2' + x;
var ex = document.createElement('div');
ex.id = 'ex' + x;
var ext = document.createTextNode("X");

base.appendChild(in_);
in_.appendChild(in_2);
in_2.appendChild(ex);
ex.appendChild(ext);
document.body.appendChild(base);
x = x + 1;

}
for(y = 0; y < 10; y++){
document.getElementById('ext' + y).onClick(function(){
var r = document.getElementById('note' + x);
r.parentNode.removeChild(r);
});

你可以尝试这样..这段代码不是确切的解决方案，只是为了给你一个想法..

Answer 5

真的很多事情。仅删除最后一个div的原因是因为所有div共享相同的id。我将其更改为具有唯一ID。那说，你可以用这个＆＃39;要引用当前div并添加事件侦听器的关键字：

＆＃13;

function openNote() {

var base = document.createElement('div'); 
base.id = 'note';
    base.innerHTML = "<br /><br />" + Math.random();
var in_ = document.createElement('div');
in_.id = 'note_in';
var in_2 = document.createElement('div');
in_2.id = 'note_in2';
var ex = document.createElement('div');
ex.id = 'ex';
ex.addEventListener("click", closeWindow);
var ext = document.createTextNode("X");

base.appendChild(in_);
in_.appendChild(in_2);
in_2.appendChild(ex);
ex.appendChild(ext);
document.body.appendChild(base);



function closeWindow()
{  
  var r = this.parentNode.parentNode.parentNode;
  r.parentNode.removeChild(r);
}
}

＆＃13;

#note{
position: relative;
background:#819C9A;
height : 200px;
width : 150px;
border: 2px solid;
border-radius: 25px;
border-color:#49706E;
margin:10px;

}
#note_in{
position: absolute;
top: 0px;
left: 0px;
height : 35px;
width : 150px;
background:rgba(255,255,255,0.2);
}
#note_in2
{
float:right;
height : 25px;
width : 25px;
margin:5px;
background:#9DCCCA;
border-radius: 15px;
text-align: center;
cursor:pointer;
}
#ex{

margin-top: 4px;
 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="script.js"></script>

</head>
<body>

<button onClick="openNote();">Press me!</button>


</body>
</html>

＆＃13;

我还添加了一些随机文本，以显示哪个div已被删除。还改变了css以使音符位置相对并且在位置0,0处将note_in位置绝对（即，note_in绝对地关于音符定位）。如果您没有设置音符的位置，则任何子节点都将相对于音符的父节点（即正文）定位。

干杯

使用纯js创建可关闭的div元素

5 个答案: