Удалить функцию узла на родительском элементе

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/

Answer 2

Вы хотите, чтобы это для широкой поддержки:

output_to_clear.parentNode.removeChild(output_to_clear); 

---

Или это только в современных браузерах:

output_to_clear.remove(); 

---

Но в любом случае, убедитесь, что вы не пытайтесь удалить его после того, как он уже удален. Так как вы кэшировать ссылку, что может быть проблемой, так что это может быть безопаснее:

if (output_to_clear.parentNode != null) { 
    output_to_clear.remove(); 
} 

---

Если вы надеялись освободить его содержание, то сделать это:

while (output_to_clear.firstChild) { 
    output_to_clear.removeChild(output_to_clear.firstChild); 
} 

Answer 3

Я думаю, что с помощью JQuery-х Вероятно, лучший выбор здесь - $ .remove(). Если вы не можете или не хотите использовать jQuery, The Mozilla docs for Node предоставляет функцию для удаления всех дочерних узлов.

Element.prototype.removeAll = function() { 
    while (this.firstChild) { this.removeChild(this.firstChild); } 
    return this; 
}; 

Что вы будете использовать, как:

output_to_clear.removeAll(); 

Для одноразово данного пример при условии:

while (output_to_clear.firstChild) { output_to_clear.removeChild(output_to_clear.firstChild); }