[ 자바스크립트 ] removeChild() & childNodes()

<button onclick="testing()"> 삭제하기 </button>

<div id="demo">
    <p> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 

        tag.removeChild( tag.childNodes[ 0 ] ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div id="demo"><p> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 

        tag.removeChild( tag.childNodes[ 0 ] ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div id="demo">
    <p> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 

        tag.removeChild( tag.childNodes[ 1 ] ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div id="demo">
    <p> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 

        tag.removeChild( tag.childNodes[ 2 ] ); 
} 
</script>
 

---

<button onclick="testing()"> 삭제하기 </button>

<div id="demo">
    <p> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 

        tag.removeChild( tag.childNodes[ 3 ] ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div>
    <p id="demo"> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 

        var parent = tag.parentNode; 

        parent.removeChild( tag ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div>
    <p id="demo"> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 
        var parent = tag.parentNode; 

        var prev = tag.previousSibling; 

        parent.removeChild( tag ); 
        parent.removeChild( prev ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div>
    <p> Hi, everyone. </p>
    <p id="demo"> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 
        var parent = tag.parentNode; 
        var prev = tag.previousSibling; 

        parent.removeChild( tag ); 
        parent.removeChild( prev ); 
} 
</script>

---

<button onclick="testing()"> 삭제하기 </button>

<div>
    Hi, everyone. 
    <p id="demo"> Nice to meet you. </p>
</div>


<script type="text/javascript">

function testing (){ 

        var tag = document.getElementById( "demo" ); 
        var parent = tag.parentNode; 
        var prev = tag.previousSibling; 

        parent.removeChild( tag ); 
        parent.removeChild( prev ); 
} 
</script>

---

<button onclick="deleteTag( myTag )"> 삭제하기 </button>

<div>
    Hi, everyone. 
    <p id="demo"> Nice to meet you. </p>
</div>


<script type="text/javascript">

var myTag = document.getElementById( "demo" ); 

function deleteTag ( tag ){ 

        if ( tag == null ) return; 

        var parent = tag.parentNode; 
        var prev = tag.previousSibling; 
        var text; 

        if ( prev && prev.nodeName == "#text" ) { 

                text = prev.nodeValue; 
                text = text.replace( /\s{1,}$/g, "" ); 

                if ( text == "" ) parent.removeChild( prev ); 
                else prev.nodeValue = text; 
        } 

        parent.removeChild( tag ); 
} 
</script>

---

<button onclick="deleteTag( myTag )"> 삭제하기 </button>

<div>
    <p id="demo"> Hi, everyone. </p>
    <p> Nice to meet you. </p>
</div>


<script type="text/javascript">

var myTag = document.getElementById( "demo" ); 

function deleteTag ( tag ){ 

        if ( tag == null ) return; 

        var parent = tag.parentNode; 
        var prev = tag.previousSibling; 
        var text; 

        if ( prev && prev.nodeName == "#text" ) { 

                text = prev.nodeValue; 
                text = text.replace( /\s{1,}$/g, "" ); 

                if ( text == "" ) parent.removeChild( prev ); 
                else prev.nodeValue = text; 
        } 

        parent.removeChild( tag ); 
} 
</script>

---

만일, <body> 안에 있는 <br /> 태그를 전부 삭제하고 싶다면,
아래 예문처럼, 마지막에 있는 <br /> 태그부터 삭제해나가야 한다.

If you want to remove all <br /> tags in Html,
as shown below, you should remove in reverse order.

<body>
<button onclick="testing()"> 삭제하기 </button>

<div>
Hi, everyone. <br />
Nice to meet you. <br />
</div>

How was your today? <br />
Did you have fun? <br />


<script type="text/javascript">

function testing (){ 

        var brTags = document.getElementsByTagName( "br" ); 

        var x = brTags.length - 1; 

        for ( x ; x >= 0; x-- ) var a = deleteTag( brTags[ x ] ); 
} 

function deleteTag ( tag ){ 

        if ( tag == null ) return; 

        var parent = tag.parentNode; 
        var prev = tag.previousSibling; 
        var text; 

        if ( prev && prev.nodeName == "#text" ) { 

                text = prev.nodeValue; 
                text = text.replace( /\s{1,}$/g, "" ); 

                if ( text == "" ) parent.removeChild( prev ); 
                else prev.nodeValue = text; 
        } 

        parent.removeChild( tag ); 
} 
</script>
</body>

이 내용이 도움이 되셨다면, 아래의 하트 버튼을 눌러주세요. *^^*