javascript - 删除父元素上的节点功能

Question

我是 JS 新手。我试图通过单击按钮来删除父节点及其所有子节点。但控制台告诉我 undefined 不是一个函数。我错过了什么？

fiddle :

http://jsfiddle.net/vy0d8bqt/

HTML:

<button type="button" id="output">Get contacts</button>
        <button type="button" id="clear_contacts">clear contact</button>
        <div id="output_here"></div>

JS:

// contact book, getting data from JSON and outputting via a button

            // define a JSON structure
            var contacts = {
                "friends" :
                [
                    {
                    "name" : "name1",
                    "surname" : "surname1"
                    },
                    {
                    "name" : "name2",
                    "surname" : "surname2"
                }
                ]
            };

            //get button ID and id of div where content will be shown
            var get_contacts_btn = document.getElementById("output");
            var output = document.getElementById("output_here");
            var clear = document.getElementById("clear_contacts");
            var i;
            // get length of JSON

            var contacts_length = contacts.friends.length;

            get_contacts_btn.addEventListener('click', function(){
                //console.log("clicked");
                for(i = 0; i < contacts_length; i++){
                var data = contacts.friends[i];
                var name = data.name;
                var surname = data.surname;
                output.style.display = 'block';
                output.innerHTML += "<p> name: " + name + "| surname: " + surname + "</p>";



                }
            });

            //get Children of output div to remove them on clear button 
           //get output to clear

           output_to_clear = document.getElementById("output_here");


            clear.addEventListener('click', function(){
                output_to_clear.removeNode(true);
            });

Answer 1

您应该使用remove()而不是removeNode()

http://jsfiddle.net/vy0d8bqt/1/

但是，这也会删除 output_to_clear 节点本身。如果您只想删除节点的所有内容，但不删除节点本身(这样您可以在清除节点后再次单击“获取联系人”按钮)，您可以使用 output_to_clear.innerHTML = ''

http://jsfiddle.net/vy0d8bqt/3/