순수 js를 사용하여 닫을 수있는 div 요소 만들기

X를 눌러 닫을 수있는 작은 창을 만드는 버튼을 만들려고합니다. 문제는 내가 마지막으로 만든 창만 닫을 수 있다는 것입니다.순수 js를 사용하여 닫을 수있는 div 요소 만들기

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); 
 
} 
 
}

#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; 
 
    
 
}

<!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>

나는 자바 스크립트 비교적 새로운 해요, 어떤 도움이나 조언을 부탁드립니다.

출처

2014-11-20 Runaider

나는 당신이 할 수있는 ... 유는 해당 "X"를 클릭하여 메모를 닫을 수 있도록 유 .. 만든 모든 노트에 대한 고유 ID를 제공해야한다고 생각 아이디와 var에 X를 추가하여 해당 .. x 값은 메모를 만들 때 증가시킬 수 있습니다. –

@Bhojendra - C-Link Nepal 별로 X가 모든 창을 닫아야합니다. – Runaider

문제는 동일한 id를 가진 dom 요소를 두 개 이상 만듭니다. id는 페이지마다 고유합니다.

이제 'Press me!'를 클릭 할 때마다 무슨 일이 발생합니까? 새로운 DOM 요소가 생성되지만 document.getElementById ('ex')는 트리의 첫 번째 요소 만 가져 오므로 이후에 추가하는 요소 수에 관계없이 항상 첫 번째 요소에 이벤트를 바인딩합니다.

를 사용하여 클래스와 클래스에 바인딩 : 고정에 대한

옵션 몇 것입니다.
확인은 참고가 있다면,

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); 
 
} 
 
}

#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; 
 
    
 
}

<!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>

다른 하나를 열거 나 이전

3 옵션 사용을 이미 작성 전 및 기본 변수를 파괴 (예 노호)하지 않는, 이미 열려있는 경우

실제로 모든 아이디의

출처

2014-11-20 12:17:39 n0mercy

이렇게 빠르고 자세한 답변을 해주셔서 감사합니다. – Runaider

여러 div에 동일한 ID를 지정하면 클래스에 동일한 ID를 사용하도록 클래스를 할당하십시오.

닫기 버튼을 클릭하면 모두 닫힙니다. 특정 div를 닫으려면 순차적 ID를 사용하십시오.

출처

2014-11-20 12:14:36 mutlei

답장을 보내 주셔서 감사합니다. – Runaider

//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); 
});

을 건너 뛸 수있는 3 옵션을 사용하여

다음과 같이 시도해 볼 수 있습니다.이 코드는 정확한 해결책은 아니지만 단지 아이디어를 제공하는 것입니다.

출처

2014-11-20 12:21:54

답장을 보내 주셔서 감사합니다. – Runaider

언급 한대로 요소 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); 
    } 
}

출처

2014-11-20 12:25:40 Zudwa

아쉽습니다. 답해 주셔서 감사합니다. – Runaider

커플 :

둘째, 당신은 ID 또는 클래스를 사용 클로저를 사용하지 않고 요소를 제거 할 수 있습니다. 마지막 div 만 제거 된 이유는 모든 div가 동일한 ID를 공유하기 때문입니다. 고유 한 ID를 갖도록 변경했습니다. 나는 또한 단지 제거 된 사업부 보여주기 위해 몇 가지 임의의 텍스트를 추가

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); 
 
} 
 
}

#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; 
 
    
 
}

<!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>

: 그건 당신이 현재 사업부를 참조하여 이벤트 리스너를 추가하려면 '이'키워드를 사용할 수 있습니다 말했다 . 또한 css를 위치를 상대 위치로 만들고 note_in 위치를 절대 위치 0,0에 절대 지정합니다 (즉, note_in은 참고와 관련하여 절대적으로 배치됩니다). 노트의 위치를 설정하지 않으면 모든 하위 노드가 노트의 부모 (즉 본문)에 상대적으로 배치됩니다.

건배

출처

2014-11-20 12:46:37 Yowser

순수 js를 사용하여 닫을 수있는 div 요소 만들기

답변

관련 문제