Hapus semua elemen turunan dari simpul DOM di JavaScript


874

Bagaimana cara saya menghapus semua elemen turunan dari simpul DOM dalam JavaScript?

Katakanlah saya memiliki HTML (jelek) berikut:

<p id="foo">
    <span>hello</span>
    <div>world</div>
</p>

Dan saya ambil simpul yang saya inginkan seperti ini:

var myNode = document.getElementById("foo");

Bagaimana saya bisa menghapus anak-anak foosehingga hanya <p id="foo"></p>tersisa?

Bisakah saya lakukan:

myNode.childNodes = new Array();

atau haruskah saya menggunakan kombinasi removeElement?

Saya ingin jawabannya langsung DOM; meskipun poin tambahan jika Anda juga memberikan jawaban di jQuery bersama dengan jawaban DOM-only.

Jawaban:


1675

Opsi 1 A: Kliring innerHTML.

  • Pendekatan ini sederhana, tetapi mungkin tidak cocok untuk aplikasi berkinerja tinggi karena memanggil parser HTML browser (meskipun browser dapat mengoptimalkan untuk kasus di mana nilai adalah string kosong).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.innerHTML = '';
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via innerHTML</button>

Opsi 1 B: Kliring textContent

  • Seperti di atas, tetapi gunakan .textContent. Menurut MDN, ini akan lebih cepat daripada innerHTMLbrowser tidak akan memanggil parser HTML mereka dan sebagai gantinya akan segera mengganti semua anak elemen dengan satu #textnode.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  myNode.textContent = '';
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via textContent</button>

Opsi 2 A: Looping untuk menghapus setiap lastChild:

  • Sunting sebelumnya untuk jawaban ini digunakan firstChild, tetapi ini diperbarui untuk digunakan lastChildseperti dalam ilmu komputer, secara umum , secara signifikan lebih cepat untuk menghapus elemen terakhir dari koleksi daripada untuk menghapus elemen pertama (tergantung pada bagaimana koleksi diimplementasikan ).
  • Loop terus memeriksa untuk firstChild berjaga-jaga jika lebih cepat untuk memeriksa firstChilddaripada lastChild(misalnya jika daftar elemen diimplementasikan sebagai daftar tertaut yang diarahkan oleh UA).

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.firstChild) {
    myNode.removeChild(myNode.lastChild);
  }
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello</span>
</div>
<button id='doFoo'>Remove via lastChild-loop</button>

Opsi 2 B: Looping untuk menghapus setiap lastElementChild:

  • Pendekatan ini memelihara semua anak-anak yang bukan Element(yaitu #textsimpul dan <!-- comments -->) dari orang tua (tetapi bukan keturunan mereka) - dan ini mungkin diinginkan dalam aplikasi Anda (misalnya beberapa sistem templating yang menggunakan komentar HTML sebaris untuk menyimpan instruksi templat).
  • Pendekatan ini tidak digunakan sampai beberapa tahun terakhir karena Internet Explorer hanya menambahkan dukungan untuk lastElementChilddi IE9.

doFoo.onclick = () => {
  const myNode = document.getElementById("foo");
  while (myNode.lastElementChild) {
    myNode.removeChild(myNode.lastElementChild);
  }
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <!-- This comment won't be removed -->
  <span>Hello <!-- This comment WILL be removed --></span>
  <!-- But this one won't. -->
</div>
<button id='doFoo'>Remove via lastElementChild-loop</button>

Bonus: Element.clearChildrenmonkey-patch:

  • Kita dapat menambahkan metode-properti baru ke Elementprototipe dalam JavaScript untuk menyederhanakan memohon untuk hanya el.clearChildren()(di mana eladalah salah HTML objek elemen).
  • (Sebenarnya ini adalah patch monyet, bukan polyfill, karena ini bukan fitur DOM standar atau fitur yang hilang. Perhatikan bahwa patch monyet tidak disarankan dalam banyak situasi.)

if( typeof Element.prototype.clearChildren === 'undefined' ) {
    Object.defineProperty(Element.prototype, 'clearChildren', {
      configurable: true,
      enumerable: false,
      value: function() {
        while(this.firstChild) this.removeChild(this.lastChild);
      }
    });
}
<div id='foo' style="height: 100px; width: 100px; border: 1px solid black;">
  <span>Hello <!-- This comment WILL be removed --></span>
</div>
<button onclick="this.previousElementSibling.clearChildren()">Remove via monkey-patch</button>


6
Dari jQuery, dua masalah ini dapat dipertimbangkan: Metode ini menghapus tidak hanya elemen anak (dan keturunan lainnya), tetapi juga teks apa pun dalam rangkaian elemen yang cocok. Ini karena, menurut spesifikasi DOM, string teks apa pun dalam suatu elemen dianggap sebagai simpul anak dari elemen itu. DAN "Untuk menghindari kebocoran memori, jQuery menghapus konstruksi lain seperti data dan penangan peristiwa dari elemen anak sebelum menghapus elemen itu sendiri."
jottos

104
Btw, menggunakan lastChild tampaknya sedikit lebih efektif jsperf.com/innerhtml-vs-removechild/15
Andrey Lushnikov

24
innerHTML hanya berfungsi jika Anda hanya berurusan dengan HTML. Jika ada misalnya SVG di dalam hanya penghapusan Elemen akan bekerja
stwissel

34
TIDAK PERNAH PERNAH PERNAH menggunakan innerHTML = ''. Jangan. Masalahnya adalah bahwa item terlihat seperti mereka dihapus tetapi secara internal, node tetap ada dan memperlambat segalanya. Anda harus menghapus semua node individual karena suatu alasan. Diuji di Google Chrome dan IE. Harap pertimbangkan untuk menghapus "solusi" innerHTML karena itu salah.
Kenji

15
@vsync Saya tidak percaya komentar Kenji cukup beralasan. Melakukan innerHTML = ''lebih lambat, tapi saya pikir itu tidak "salah". Setiap klaim kebocoran memori harus didukung dengan bukti.
Chris Middleton

115

Jawaban yang saat ini diterima salah tentang innerHTMLmenjadi lebih lambat (setidaknya di IE dan Chrome), seperti yang disebutkan dengan benar m93a.

Chrome dan FF secara dramatis lebih cepat menggunakan metode ini (yang akan menghancurkan data jquery terlampir):

var cNode = node.cloneNode(false);
node.parentNode.replaceChild(cNode, node);

dalam beberapa detik untuk FF dan Chrome, dan tercepat di IE:

node.innerHTML = '';

InnerHTML tidak akan memusnahkan event handler Anda atau menghancurkan referensi jquery , juga direkomendasikan sebagai solusi di sini: https://developer.mozilla.org/en-US/docs/Web/API/Element.innerHTML .

Metode manipulasi DOM tercepat (masih lebih lambat dari dua sebelumnya) adalah penghapusan Rentang, tetapi rentang tidak didukung sampai IE9.

var range = document.createRange();
range.selectNodeContents(node);
range.deleteContents();

Metode lain yang disebutkan tampaknya sebanding, tetapi jauh lebih lambat daripada innerHTML, kecuali untuk outlier, jquery (1.1.1 dan 3.1.1), yang jauh lebih lambat dari yang lain:

$(node).empty();

Bukti di sini:

http://jsperf.com/innerhtml-vs-removechild/167 http://jsperf.com/innerhtml-vs-removechild/300 https://jsperf.com/remove-all-child-elements-of-a- dom-node-in-javascript (URL baru untuk reboot jsperf karena mengedit URL lama tidak berfungsi)

"Per-test-loop" Jsperf sering dipahami sebagai "per-iterasi", dan hanya iterasi pertama yang memiliki node untuk dihapus sehingga hasilnya tidak berarti, pada saat memposting ada tes di utas ini yang dibuat secara tidak benar.


2
Jsperf Anda benar-benar rusak. Itu bukan bukti yang sangat bagus.
bryc

4
Ini adalah jawaban terbaik saat ini. Segala sesuatu yang lain di utas ini adalah disinformasi (!) Terima kasih telah membersihkan semua tes lama yang buruk.
Ben

6
"InnerHTML tidak akan menghancurkan penangan acara Anda atau mengacaukan referensi jquery" Ini akan menjadi yatim piatu data jQuery.cache, menyebabkan kebocoran memori karena satu-satunya referensi yang tersedia untuk mengelola data itu adalah pada elemen yang baru saja Anda hancurkan.

1
"InnerHTML tidak akan menghancurkan penangan acara Anda atau mengacaukan referensi jquery" mengacu pada wadah, bukan anak-anak. cloneNodemengganti wadah, yang berarti referensi ke wadah tidak dipertahankan (jquery atau lainnya). Tembolok Jquery mungkin membuatnya layak menggunakan jquery untuk menghapus elemen jika Anda memiliki data jquery terlampir. Semoga mereka beralih ke WeakMaps di beberapa titik. Membersihkan (atau bahkan keberadaan) $ .cache tampaknya tidak didokumentasikan secara resmi.
npjohns

10
Tes jsperf rusak di sini. Mesin uji melaporkan hal berikut: "Kesalahan: Dom node tidak dibuat ulang selama iterasi, hasil pengujian akan menjadi tidak berarti."
pengirim

73

Gunakan Javascript modern, dengan remove!

const parent = document.getElementById("foo");
while (parent.firstChild) {
    parent.firstChild.remove();
}

Ini adalah cara yang lebih baru untuk menulis penghapusan node di ES5. Ini adalah vanilla JS dan jauh lebih bagus daripada versi sebelumnya.

Sebagian besar pengguna harus memiliki peramban modern atau Anda dapat melakukan transpile turun jika diperlukan.

Dukungan Browser - 95% Des 2019


14
Untuk loop tidak akan berfungsi karena parent.children / parent.childNodes adalah daftar langsung; panggilan hapus mengubah daftar dan karena itu iterator Anda tidak dijamin untuk beralih di atas segalanya. Di chrome, misalnya, Anda melewatkan setiap simpul lainnya. Lebih baik menggunakan while (parent.firstChild) { parent.removeChild(parent.firstChild); }loop. developer.mozilla.org/en-US/docs/Web/API/ParentNode/children developer.mozilla.org/en-US/docs/Web/API/Node/childNodes
qix

3
while (parent.firstChild && !parent.firstChild.remove());
Steno

1
Satu liner untuk saat kinerja bukan masalah besar:[...parent.childNodes].forEach(el => el.remove());

1
Ini tidak berfungsi di dalam Filescript ... sebagai gantinya gunakanwhile (selectElem.firstElementChild) { selectElem.firstElementChild.remove(); }
John Henckel

43
var myNode = document.getElementById("foo");
var fc = myNode.firstChild;

while( fc ) {
    myNode.removeChild( fc );
    fc = myNode.firstChild;
}

Jika ada kemungkinan Anda memiliki keturunan yang terpengaruh jQuery, maka Anda harus menggunakan beberapa metode yang akan membersihkan data jQuery.

$('#foo').empty();

.empty()Metode jQuery akan memastikan bahwa data apa pun yang terkait dengan jQuery dengan elemen yang dihapus akan dibersihkan.

Jika Anda hanya menggunakan DOMmetode menghapus anak-anak, data itu akan tetap ada.


Metode innerHTML sejauh ini adalah yang paling performan. Yang mengatakan, data sedang dibersihkan oleh jquery's .empty (): Menghilangkan data () di dalam jquery yang terkait dengan tag anak menggunakan loop rekursif (lambat, tetapi dapat mengurangi penggunaan memori secara signifikan), Mencegah kebocoran memori JIKA Anda memasang acara tanpa jquery, seperti menggunakan .onclick = .... Jika Anda tidak memiliki acara seperti itu pada anak-anak untuk dihapus, maka pengaturan innerHTML tidak akan bocor. Jadi jawaban terbaik adalah - itu tergantung.
Chris Moschini

1
Mengapa tidak langsung menempatkan ekspresi Anak pertama langsung dalam kondisi loop sementara? while ( myNode.firstChild ) {
Victor Zamanian

while(fc = myNode.firstChild){ myNode.removeChild(fc); }
Valen

36

Jika Anda menggunakan jQuery:

$('#foo').empty();

Jika tidak:

var foo = document.getElementById('foo');
while (foo.firstChild) foo.removeChild(foo.firstChild);

20

Tercepat...

var removeChilds = function (node) {
    var last;
    while (last = node.lastChild) node.removeChild(last);
};

Terima kasih kepada Andrey Lushnikov untuk tautannya ke jsperf.com (situs keren!).

EDIT: untuk menjadi jelas, tidak ada perbedaan kinerja di Chrome antara firstChild dan lastChild. Jawaban teratas menunjukkan solusi yang baik untuk kinerja.


Hal yang sama tanpa peringatan LINT: clear: function (container) {for (;;) {var child = container.lastChild; if (! child) break; container.removeChild (anak); }}
cskwg

9

Jika Anda hanya ingin memiliki simpul tanpa anak-anaknya, Anda juga dapat membuat salinannya seperti ini:

var dupNode = document.getElementById("foo").cloneNode(false);

Tergantung pada apa yang ingin Anda capai.


3
Mungkin Anda bahkan bisa mengikuti ini parent.replaceChild(cloned, original)? Itu mungkin lebih cepat daripada menghapus anak satu per satu dan harus bekerja pada semua yang mendukung DOM (jadi setiap jenis dokumen XML, termasuk SVG). Mengatur innerHTML mungkin juga lebih cepat daripada menghapus anak satu per satu, tetapi itu tidak berfungsi apa-apa selain dokumen HTML. Harus menguji itu beberapa waktu.
Maarten

13
Itu tidak akan menyalin pendengar acara yang ditambahkan menggunakan addEventListener.
Matius

Jika Anda dapat hidup dengan batasan itu, tentu saja cepat: jsperf.com/innerhtml-vs-removechild/137
DanMan

7

Inilah pendekatan lain:

function removeAllChildren(theParent){

    // Create the Range object
    var rangeObj = new Range();

    // Select all of theParent's children
    rangeObj.selectNodeContents(theParent);

    // Delete everything that is selected
    rangeObj.deleteContents();
}

1
Ini menarik tetapi tampaknya cukup lambat dibandingkan dengan metode lain: jsperf.com/innerhtml-vs-removechild/256
Polaris878

6
element.textContent = '';

Ini seperti innerText, kecuali standar. Ini sedikit lebih lambat daripada removeChild(), tetapi lebih mudah digunakan dan tidak akan membuat banyak perbedaan kinerja jika Anda tidak memiliki terlalu banyak hal untuk dihapus.


Node teks bukan elemen
check_ca

maaf Anda benar, ini menghapus semua elemen anak-anak
check_ca

Ini tidak akan berfungsi di versi Internet Explorer yang lebih lama.
pwdst

4

Menanggapi DanMan, Maarten dan Matt. Mengkloning sebuah node, untuk mengatur teks memang cara yang layak dalam hasil saya.

// @param {node} node
// @return {node} empty node
function removeAllChildrenFromNode (node) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = removeAllChildrenFromNode( myNode );

Ini juga berfungsi untuk node tidak di dom yang mengembalikan null ketika mencoba mengakses parentNode. Selain itu, jika Anda perlu aman, sebuah node kosong sebelum menambahkan konten, ini sangat membantu. Pertimbangkan use case di bawahnya.

// @param {node} node
// @param {string|html} content
// @return {node} node with content only
function refreshContent (node, content) {
  var shell;
  // do not copy the contents
  shell = node.cloneNode(false);

  // use innerHTML or you preffered method
  // depending on what you need
  shell.innerHTML( content );

  if (node.parentNode) {
    node.parentNode.replaceChild(shell, node);
  }

  return shell;
}

// use as such
var myNode = document.getElementById('foo');
myNode = refreshContent( myNode );

Saya menemukan metode ini sangat berguna ketika mengganti string di dalam elemen, jika Anda tidak yakin apa yang akan mengandung node, daripada khawatir bagaimana membersihkan kekacauan, mulailah dengan segar.


3
hal terburuk yang pernah ada. jika Anda mengganti simpul asli dengan klonnya, Anda kehilangan referensi ke simpul asli. tidak ada pengendali acara dan binding lainnya tidak akan berfungsi.
Arun Aravind

4

Inilah yang biasanya saya lakukan:

HTMLElement.prototype.empty = function() {
    while (this.firstChild) {
        this.removeChild(this.firstChild);
    }
}

Dan voila, nanti Anda dapat mengosongkan elemen dom dengan:

anyDom.empty()

Saya suka solusi ini! Ada alasan mengapa saya harus menggunakan ini di pengaturan innerHTML ke string kosong?
TheCodenator

kinerja: domEl.innerHTML = ""buruk dan dianggap praktik buruk
Ado Ren

3

Ada beberapa opsi untuk mencapai itu:

Tercepat ():

while (node.lastChild) {
  node.removeChild(node.lastChild);
}

Alternatif (lebih lambat):

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

while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

Benchmark dengan opsi yang disarankan


3
var empty_element = function (element) {

    var node = element;

    while (element.hasChildNodes()) {              // selected elem has children

        if (node.hasChildNodes()) {                // current node has children
            node = node.lastChild;                 // set current node to child
        }
        else {                                     // last child found
            console.log(node.nodeName);
            node = node.parentNode;                // set node to parent
            node.removeChild(node.lastChild);      // remove last node
        }
    }
}

Ini akan menghapus semua node dalam elemen.


... karena itu tidak perlu rumit, dan tidak ada penjelasan yang diberikan tentang cara kerjanya (yang sebenarnya tidak jelas), saya curiga.
Periata Breatta

2

innerText adalah pemenangnya! http://jsperf.com/innerhtml-vs-removechild/133 . Pada semua tes sebelumnya, dom dom dari simpul orangtua dihapus pada iterasi pertama dan kemudian innerHTML atau removeChild di mana diterapkan pada div kosong.


5
innerTextadalah hak milik MS. Hanya mengatakan.
DanMan

1
Cukup yakin ini adalah tes yang cacat - itu bergantung pada boxtersedia bukan sebagai var tetapi melalui pencarian DOM berdasarkan id, dan karena whileloop membuat panggilan lambat ini berkali-kali itu dihukum.
nrabinowitz

2

Cara termudah untuk menghapus simpul anak dari sebuah simpul melalui Javascript

var myNode = document.getElementById("foo");
while(myNode.hasChildNodes())
{
   myNode.removeChild(myNode.lastChild);
}

2

saya melihat orang melakukan:

while (el.firstNode) {
    el.removeChild(el.firstNode);
}

lalu seseorang berkata menggunakan el.lastNodelebih cepat

namun saya akan berpikir bahwa ini yang tercepat:

var children = el.childNodes;
for (var i=children.length - 1; i>-1; i--) {
    el.removeNode(children[i]);
}

Bagaimana menurut anda?

ps: topik ini adalah penyelamat bagi saya. addon firefox saya ditolak karena saya menggunakan innerHTML. Sudah kebiasaan untuk waktu yang lama. maka saya foudn ini. dan saya benar-benar memperhatikan perbedaan kecepatan. saat memuat, innerhtml perlu beberapa saat untuk memperbarui, namun dengan addElement instan!


1
baik saya pikir apakah tercepat atau tidak, beberapa tes jsperf dapat membuktikan kedua kasus
Nikos M.

Super work terima kasih untuk tes-tes itu. mereka tidak termasuk yang for (var i=0.... Tapi inilah yang saya dapatkan ketika saya menjalankan tes-tes tersebut: i.imgur.com/Mn61AmI.png sehingga dalam ketiga tes tersebut firstNode lebih cepat daripada lastNode dan innerHTML yang benar-benar keren
Noitidart

saya menambahkan tes: jsperf.com/innerhtml-vs-removechild/220 melakukan hal-hal menarik yang menggunakan metode el.firstNode adalah cara tercepat sepertinya
Noitidart

2

Menggunakan rentang loop terasa paling alami bagi saya:

for (var child of node.childNodes) {
    child.remove();
}

Menurut pengukuran saya di Chrome dan Firefox, ini sekitar 1.3x lebih lambat. Dalam keadaan normal, ini mungkin tidak masalah.


2
 let el = document.querySelector('#el');
 if (el.hasChildNodes()) {
      el.childNodes.forEach(child => el.removeChild(child));
 }

1
Tolong jelaskan dalam jawaban apa yang kode Anda lakukan?
Nirav Joshi

1
Cukup

1

Secara umum, JavaScript menggunakan array untuk referensi daftar node DOM. Jadi, ini akan berfungsi dengan baik jika Anda memiliki minat untuk melakukannya melalui array HTMLElements. Juga, patut dicatat, karena saya menggunakan referensi array bukan JavaScript proto, ini harus bekerja di browser apa pun, termasuk IE.

while(nodeArray.length !== 0) {
  nodeArray[0].parentNode.removeChild(nodeArray[0]);
}

1

Mengapa kita tidak mengikuti metode paling sederhana di sini "hapus" di dalam sementara.

const foo = document.querySelector(".foo");
while (foo.firstChild) {
  foo.firstChild.remove();     
}
  • Memilih div induk
  • Menggunakan "hapus" Metode di dalam loop Sementara untuk menghilangkan elemen anak pertama, sampai tidak ada yang tersisa.

Tolong jelaskan baris kode Anda sehingga pengguna lain dapat memahami fungsinya. Terima kasih!
Ignacio Ara

@IgnacioAra Selesai!
Neelansh Verma

1

Hanya melihat seseorang menyebutkan pertanyaan ini di yang lain dan berpikir saya akan menambahkan metode yang belum saya lihat:

function clear(el) {
    el.parentNode.replaceChild(el.cloneNode(false), el);
}

var myNode = document.getElementById("foo");
clear(myNode);

Fungsi yang jelas adalah mengambil elemen dan menggunakan simpul orangtua untuk mengganti sendiri dengan salinan tanpa anak-anak itu. Tidak banyak peningkatan kinerja jika elemen jarang tetapi ketika elemen memiliki banyak node, keuntungan kinerja direalisasikan.


1
Sebenarnya sepertinya disebutkan di sini stackoverflow.com/a/15441725/576767
Félix Gagnon-Grenier

Felix saya pasti melewatkannya, terima kasih atas koreksi +1.
Harry Chilinguerian

1

Pendekatan hanya fungsional:

const domChildren = (el) => Array.from(el.childNodes)
const domRemove = (el) => el.parentNode.removeChild(el)
const domEmpty = (el) => domChildren(el).map(domRemove)

"childNodes" di domChildren akan memberikan nodeList dari elemen anak-anak langsung, yang kosong ketika tidak ada yang ditemukan. Untuk memetakan melalui nodeList, domChildren mengubahnya menjadi array. domEmpty memetakan fungsi domRemove atas semua elemen yang menghapusnya.

Contoh penggunaan:

domEmpty(document.body)

menghapus semua anak dari elemen tubuh.


0

Cara lain di jQuery

var foo = $("#foo");
foo.children().remove();
//or
$("*", foo ).remove();
//or
foo.html("");
//or
foo.empty();

Voting karena OP mengatakan jawaban dalam DOM langsung lebih disukai.
bwindels

Juga, jQuery memiliki .empty()metode, hanya $("#foo").empty()akan cukup
YakovL

-1

cukup hanya IE:

parentElement.removeNode(true);

true - Berarti untuk melakukan deep removal - yang berarti bahwa semua anak juga dihapus


1
YAITU? Ini abad ke-21!
everlasto

-1

Cara termudah:

let container = document.getElementById("containerId");
container.innerHTML = "";

Sementara ini berhasil, berhati-hatilah yang container.innerHTML = nullakan membuat Internet Explorer menampilkan teks null. Jadi, ini tidak benar-benar menghapus anak-anak, kataku.
Arjan

-1

sederhana dan cepat digunakan untuk loop !!

var myNode = document.getElementById("foo");

    for(var i = myNode.childNodes.length - 1; i >= 0; --i) {
      myNode.removeChild(myNode.childNodes[i]);
    }

ini tidak akan berfungsi dalam <span>tag!


di atas semua solusi tidak ada kode yang menghapus <span>tag
Mohit Karkar

-3

Jika Anda ingin memasukkan sesuatu ke dalamnya div, innerHTMLitu mungkin lebih baik.

Contoh saya:

<ul><div id="result"></div></ul>

<script>
  function displayHTML(result){
    var movieLink = document.createElement("li");
    var t = document.createTextNode(result.Title);
    movieLink.appendChild(t);
    outputDiv.appendChild(movieLink);
  }
</script>

Jika saya menggunakan metode .firstChildatau fungsi tidak bekerja setelahnya, tetapi tidak ada masalah dengan metode tersebut..lastChilddisplayHTML().innerHTML


-4

Ini adalah javascript murni saya tidak menggunakan jQuery tetapi bekerja di semua browser bahkan IE dan sangat mudah dimengerti

   <div id="my_div">
    <p>Paragraph one</p>
    <p>Paragraph two</p>
    <p>Paragraph three</p>
   </div>
   <button id ="my_button>Remove nodes ?</button>

   document.getElementById("my_button").addEventListener("click",function(){

  let parent_node =document.getElemetById("my_div"); //Div which contains paagraphs

  //Let find numbers of child inside the div then remove all
  for(var i =0; i < parent_node.childNodes.length; i++) {
     //To avoid a problem which may happen if there is no childNodes[i] 
     try{
       if(parent_node.childNodes[i]){
         parent_node.removeChild(parent_node.childNodes[i]);
       }
     }catch(e){
     }
  }

})

or you may simpli do this which is a quick way to do

document.getElementById("my_button").addEventListener("click",function(){

 let parent_node =document.getElemetById("my_div");
 parent_node.innerHTML ="";

})

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.