div에 단락을 추가 할 수있는 스크립트가 있습니다. 이 단락에는 일부 텍스트와 삭제 버튼이 있습니다. 이 삭제 버튼은 텍스트를 포함하여 단락을 삭제할 수 있어야하지만 (전체 단락 삭제) 그렇지 않습니다.
var elementCounter2 = 0;
function addElement2() {
elementCounter2++;
var p = document.createElement("p");
var node = document.createTextNode("This is element number " + elementCounter2);
p.setAttribute("id", "p" + elementCounter2);
p.appendChild(node);
p.innerHTML += ' <button id="del' + elementCounter2 + '" onclick="deleteElement2();">Delete this element.</button>';
document.getElementById("elements2").appendChild(p);
}
function deleteElement2() {
var p = document.getElementById("p" + elementCounter2);
var btn = document.getElementById("del" + elementCounter2);
//Button sees its own id and look for the corresponding p id, then deletes the paragraph.
}.borderful {
border: solid 1px black;
margin: 10px;
padding: 10px;
}<div class="borderful">
<p>Here is the second part</p>
<p>You can add elements here.</p>
<p>You can delete these aswell but differntly.</p>
<button onclick="addElement2();">Add an element.</button>
<div id="elements2"></div>
</div>새로 생성 된 각 단락 (인라인 코드 삭제)에 이벤트 리스너를 설정하고 카운터는 잊어 버릴 수 있습니다 (코드 작동을 보여주기 위해 여기에 보관)
var elementCounter2 = 0;
function addElement2() {
elementCounter2++;
var p = document.createElement("p");
var node = document.createTextNode("This is element number " + elementCounter2);
p.setAttribute("id", "p" + elementCounter2);
p.appendChild(node);
p.innerHTML += ' <button>Delete this element.</button>';
document.getElementById("elements2").appendChild(p);
var el = document.getElementById("p" + elementCounter2);
el.addEventListener("click", deleteElement2, false);
}
function deleteElement2() {
this.remove()
}.borderful {
border: solid 1px black;
margin: 10px;
padding: 10px;
}<div class="borderful">
<p>Here is the second part</p>
<p>You can add elements here.</p>
<p>You can delete these aswell but differntly.</p>
<button onclick="addElement2();">Add an element.</button>
<div id="elements2"></div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다