Bagaimana cara menghapus elemen HTML menggunakan Javascript?

124

Saya seorang pemula total. Adakah yang bisa memberi tahu saya cara menghapus elemen HTML menggunakan Javascript asli bukan jQuery.

index.html

<html>
<head>
 <script type="text/javascript" src="myscripts.js" > </script>
 <style>
 #dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
 }
 </style>
</head>
<body>
 <div id="dummy"></div>

 <form>
  <input type="submit" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>
</body>

myscripts.js

function removeDummy() {
 var elem = document.getElementById('dummy');
 elem.parentNode.removeChild(elem);
}

Apa yang terjadi jika saya mengklik tombol kirim, adalah tombol tersebut akan menghilang dalam waktu yang sangat singkat dan kemudian segera muncul kembali. Saya ingin menghapus elemen sepenuhnya ketika saya mengklik tombol.

javascript html Coder Pemula
sumber
Bagaimana jika saya mengkliknya, melihat kesalahan dan menekan stop ?
alex
Maaf, ini topiknya tapi sebenarnya sangat lucu, dia menamai dirinya sendiri "Newbie Coder" dan sekarang profilnya memiliki reputasi sekitar 9000. Menanyakan sesuatu di "masa lalu yang indah" sangat menguntungkan sekarang ini. :)
Rene

Jawaban:

189

Apa yang terjadi adalah formulir tersebut dikirimkan, sehingga halaman disegarkan (dengan konten aslinya). Anda menangani clickacara tersebut dengan tombol kirim.

Jika Anda ingin menghapus elemen dan tidak mengirimkan formulir, tangani submitacara tersebut di formulir, dan kembali falsedari penangan Anda:

HTML:

<form  onsubmit="return removeDummy(); ">
    <input type="submit" value="Remove DUMMY"/>
</form>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Tetapi Anda sama sekali tidak membutuhkan (atau menginginkan) formulir untuk itu, tidak jika tujuan utamanya adalah untuk menghapus div dummy. Sebagai gantinya:

HTML:

<input type="button" value="Remove DUMMY" onclick="removeDummy()" />

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}

Namun , gaya pengaturan penangan acara itu kuno. Anda tampaknya memiliki naluri yang baik bahwa kode JavaScript Anda ada di file sendiri dan semacamnya. Langkah selanjutnya adalah melangkah lebih jauh dan menghindari penggunaan onXYZatribut untuk menghubungkan penangan kejadian. Sebaliknya, dalam JavaScript Anda, Anda dapat menghubungkannya dengan cara yang lebih baru (sekitar tahun 2000) sebagai gantinya:

HTML:

<input id='btnRemoveDummy' type="button" value="Remove DUMMY"/>

JavaScript:

function removeDummy() {
    var elem = document.getElementById('dummy');
    elem.parentNode.removeChild(elem);
    return false;
}
function pageInit() {
    // Hook up the "remove dummy" button
    var btn = document.getElementById('btnRemoveDummy');
    if (btn.addEventListener) {
        // DOM2 standard
        btn.addEventListener('click', removeDummy, false);
    }
    else if (btn.attachEvent) {
        // IE (IE9 finally supports the above, though)
        btn.attachEvent('onclick', removeDummy);
    }
    else {
        // Really old or non-standard browser, try DOM0
        btn.onclick = removeDummy;
    }
}

... lalu panggil pageInit();dari scripttag di bagian paling akhir laman Anda body(tepat sebelum </body>tag penutup ), atau dari dalam window loadacara, meskipun itu terjadi sangat terlambat dalam siklus pemuatan laman dan biasanya tidak baik untuk menghubungkan acara penangan (itu terjadi setelah semua gambar akhirnya dimuat, misalnya).

Perhatikan bahwa saya harus melakukan beberapa penanganan untuk menangani perbedaan browser. Anda mungkin menginginkan fungsi untuk menghubungkan acara sehingga Anda tidak perlu mengulangi logika itu setiap saat. Atau pertimbangkan untuk menggunakan pustaka seperti jQuery , Prototype , YUI , Closure , atau beberapa lainnya untuk memuluskan perbedaan browser tersebut untuk Anda. Sangat penting untuk memahami hal-hal mendasar yang terjadi, baik dalam hal dasar-dasar JavaScript dan dasar-dasar DOM, tetapi perpustakaan menangani banyak ketidakkonsistenan, dan juga menyediakan banyak utilitas praktis - seperti sarana untuk menghubungkan penangan acara yang berhubungan dengan perbedaan browser. Kebanyakan dari mereka juga menyediakan cara untuk menyiapkan fungsi (sepertipageInit) untuk dijalankan segera setelah DOM siap untuk dimanipulasi, jauh sebelum window loaddiaktifkan.

TJ Crowder
sumber
Ubah ke type="button"atau masukkan return false;fungsi JS Anda
Pav
@Pav: Saya pikir saya akan tetap mengirimkan karena ini hanya latihan eksperimental. Saya akan melakukan beberapa proyek yang menggunakan submit jadi sebaiknya saya terbiasa ... Terima kasih atas idenya.
Newbie Coder
@ Newbie: Saya menambahkan beberapa catatan lebih lanjut.
TJ Crowder
2
mengapa tidak lakukan elem.remove ();
Muhammad Umer
1
@ Ghos3t - Beberapa cara: 1. Fungsi apa pun yang Anda panggil dari penangan bergaya atribut harus global, dan namespace global sudah Benar-benar Crowded ™ dan mudah untuk memilih nama fungsi yang bentrok dengan yang lain (ini dapat diatasi dengan menggunakan objek dengan nama yang mungkin unik dan meletakkan semua penangan Anda di atasnya). 2. Gunakan cara atribut-gaya lama (atau menugaskan ke onxyzproperti pada elemen) hanya memungkinkan satu penangan, dan jika Anda menetapkan ke properti Anda mengganti apa pun yang dulu ada di sana, sehingga tidak berfungsi dengan baik dengan yang lain. (lanjutan)
TJ Crowder
34

Lakukan saja ini element.remove();

Coba di sini LIHAT

http://jsfiddle.net/4WGRP/

Muhammad Umer
sumber
5
Hati-hati dengan ini, karena ini tampaknya merupakan tambahan yang cukup baru, dan tidak memiliki dukungan browser penuh yaitu IE dan FF versi 22 dan sebelumnya ( red-team-design.com/… ).
dule
1
Saya pribadi akan menunggu 5 tahun lagi untuk menggunakan ini
slebetman
2
Nah, ini tampaknya didukung secara faily sekarang: caniuse.com/#search=remove . Saya akan menerima untuk menggunakannya sekarang. Jika Anda benar-benar perlu mendukung IE11, saya kira polyfill dapat dengan mudah dibuat ...
jehon
5
Menulis kode bukti masa depan lebih baik daripada pemrograman untuk masa lalu. Hemat waktu pemeliharaan, dan gunakan.remove()
Gibolt
9

Anda harus menggunakan input type = "button" daripada input type = "submit".

<form>
  <input type="button" value="Remove DUMMY" onclick="removeDummy(); "/>
 </form>

Lihat Pusat Pengembang Mozilla untuk sumber daya html dan javascript dasar

CoderHawk
sumber
1
Saya mengubah tautan Anda dari W3Schools ke Mozilla Developer Center. Lihatlah w3fools.com untuk alasan saya ... Selain itu, jawaban yang bagus :)
Alastair Pitts
2
@ Alastair Pitts - tidak apa-apa. Saya hanya ingin mengarahkan PO ke tutorial dasar html dan js ..
CoderHawk
8

JavaScript Anda benar. Tombol Anda memiliki type="submit"yang menyebabkan halaman disegarkan.

Pav
sumber
5

Itu muncul kembali karena tombol kirim Anda memuat ulang halaman. Cara paling sederhana untuk mencegah perilaku ini adalah untuk menambahkan return falseke onclickseperti:

<input type="submit" value="Remove DUMMY" onclick="removeDummy(); return false;" />
mVChr
sumber
4

Ubah jenis masukan menjadi "tombol". Seperti yang dikatakan TJ dan Pav, formulir sudah diserahkan. Javascript Anda terlihat benar, dan saya memuji Anda karena mencobanya dengan cara non-JQuery :)

Newtang
sumber
Saya pikir saya akan tetap mengirimkan karena ini hanya latihan eksperimental untuk proyek masa depan saya yang menggunakan pengiriman jadi saya lebih baik membiasakannya ...
Newbie Coder
4

index.html

<input id="suby" type="submit" value="Remove DUMMY"/>

myscripts.js

document.addEventListener("DOMContentLoaded", {
//Do this AFTER elements are loaded

    document.getElementById("suby").addEventListener("click", e => {
        document.getElementById("dummy").remove()
    })

})
e-motiv
sumber
3

Itu adalah kode yang benar. Apa yang mungkin terjadi adalah formulir Anda dikirimkan, dan Anda melihat halaman baru (di mana elemen tersebut akan ada lagi).

alex
sumber
3

Coba jalankan kode ini di skrip Anda .

document.getElementById("dummy").remove();

Dan mudah-mudahan akan menghapus elemen / tombol.

Sim Reaper
sumber
2

Ini bekerja. Hapus saja tombol dari "dummy" divjika Anda ingin menyimpan tombol tersebut.

function removeDummy() {
  var elem = document.getElementById('dummy');
  elem.parentNode.removeChild(elem);
  return false;
}
#dummy {
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  background-color: #fff000;
}
<div id="dummy">
  <button onclick="removeDummy()">Remove</button>
</div>
Luaskan cuplikan

Durtle02
sumber
1

Saya masih pemula juga, tapi ini satu cara yang sederhana dan mudah: Anda dapat menggunakan outerHTML, yang merupakan keseluruhan tag, bukan hanya sebagian:

EX: <tag id='me'>blahblahblah</tag>innerHTML akan menjadi blahblahblah, dan outerHTML akan menjadi segalanya,<tag id='me'>blahblahblah</tag> ,.

Jadi, misalnya, jika Anda ingin menghapus tag, itu pada dasarnya menghapus datanya, jadi jika Anda mengubah HTML luar menjadi string kosong, itu seperti menghapusnya.

<body>
    <p id="myTag">This is going to get removed...</p>
    <input type="button" onclick="javascript:
        document.getElementById('myTag').outerHTML = '';//this makes the outerHTML (the whole tag, not what is inside it)
    " value="Remove Praragraph">
</body>

Sebaliknya, jika Anda hanya ingin tidak menampilkannya, Anda dapat menatanya di JS menggunakan properti visibilitas, opasitas, dan tampilan.

document.getElementById('foo').style.visibility = hidden;
//or
document.getElementById('foo').style.opacity = 0;
//or
document.getElementById('foo').style.display = none;

Catat itu opacity membuat elemen tetap ditampilkan, hanya saja Anda tidak bisa melihatnya terlalu sering. Selain itu, Anda dapat memilih teks, menyalin, menempel, dan melakukan semua yang biasanya Anda lakukan, meskipun tidak terlihat.
Visibility lebih sesuai dengan situasi Anda, tetapi itu akan meninggalkan ruang kosong transparan sebesar elemen yang diterapkan.
Saya akan merekomendasikan Anda menampilkan, tergantung bagaimana Anda membuat halaman web Anda. Tampilan pada dasarnya menghapus elemen dari tampilan Anda, tetapi Anda masih bisa melihatnya di DevTools. Semoga ini membantu!

HarryJamesPotter 27
sumber