Apakah fungsi butang padam javascript?

Dengan peningkatan berterusan teknologi Javascript, kami boleh membangunkan pelbagai fungsi praktikal untuk menyelesaikan masalah dalam kerja harian. Antaranya, fungsi butang padam adalah satu yang sangat praktikal, yang boleh membantu kami memadam kandungan tertentu dengan mudah pada halaman web. Seterusnya, mari kita pelajari proses penciptaan fungsi butang padam Javascript.

Pertama sekali, sebelum mencipta fungsi butang padam Javascript, kita perlu menguasai beberapa pengetahuan asas. Pertama, kita perlu tahu cara mendapatkan elemen dalam halaman web dalam Javascript supaya kita boleh mengubah suai kandungannya jika perlu. Kedua, kita perlu menguasai cara menggunakan gelung dan pernyataan bersyarat dalam Javascript untuk beroperasi pada berbilang elemen dalam halaman web. Akhir sekali, kita perlu belajar cara menggunakan pengendali acara dalam Javascript untuk mencetuskan tindakan pemadaman apabila pengguna mengklik butang.

Seterusnya, kami boleh mencipta fungsi butang padam Javascript yang paling mudah, yang boleh membantu kami memadam sebarang elemen pada halaman web. Kod khusus adalah seperti berikut:

function deleteElement(elementID) {
  var element = document.getElementById(elementID);
  element.parentNode.removeChild(element);
}

Dalam fungsi ini, kami mula-mula menggunakan kaedah document.getElementById() untuk mendapatkan elemen yang perlu dipadamkan, dan kemudian gunakan kaedah parentNode.removeChild() untuk memadamnya daripada halaman web. Parameter fungsi ini ialah nombor ID elemen yang perlu dipadamkan, iaitu pengecam elemen yang kami takrifkan dalam halaman web.

Namun, fungsi ini mempunyai banyak kekurangan. Sebagai contoh, ia hanya boleh memadamkan satu elemen dalam halaman web, tetapi tidak boleh mencapai pemadaman kelompok. Seterusnya, mari kita terokai cara membuat fungsi Javascript yang boleh memadamkan elemen dalam kelompok.

Pertama, kita perlu mencipta satu set elemen yang perlu dipadamkan dalam halaman web dan menentukan nombor ID unik untuk setiap elemen. Seterusnya, mari kita lihat contoh kod:

<ul>
  <li id="item1">列表项1</li>
  <li id="item2">列表项2</li>
  <li id="item3">列表项3</li>
</ul>
<button onclick="deleteElements()">删除选定项</button>

Dalam kod ini, kami mencipta senarai yang mengandungi tiga item senarai, setiap item senarai mempunyai nombor ID unik. Selain itu, kami mencipta butang dan mengikatnya pada fungsi baru deleteElements(). Seterusnya, mari kita lihat cara menulis fungsi ini.

function deleteElements() {
  var ul = document.querySelector('ul');
  var items = ul.querySelectorAll('li:checked');
  
  for(var i = 0; i < items.length; i++) {
    ul.removeChild(items[i]);
  }
}

Dalam fungsi ini, kami mula-mula menggunakan kaedah querySelector() untuk mendapatkan elemen senarai ul. Seterusnya, kami menggunakan kaedah querySelectorAll() untuk mendapatkan semua item senarai yang dipilih dan menyimpannya dalam item pembolehubah. Seterusnya, kami menggunakan gelung for untuk mengulangi semua item senarai yang dipilih dan mengalih keluarnya daripada halaman web menggunakan kaedah removeChild().

Dalam fungsi ini, kami menggunakan beberapa sintaks Javascript yang lebih baharu, seperti kaedah querySelector() dan querySelectorAll(), kata kunci let dalam gelung for, dsb. Sintaks ini memudahkan kami menulis fungsi Javascript yang kompleks dan meningkatkan kebolehbacaan dan prestasi kod.

Ringkasnya, fungsi butang padam Javascript adalah fungsi yang sangat praktikal yang boleh membantu kami memadam kandungan dalam halaman web dengan cepat dan mudah. Melalui pengenalan di atas, saya percaya anda telah mempelajari cara mencipta fungsi pemadaman Javascript yang mudah dan cara melanjutkannya untuk melaksanakan pemadaman kelompok. Dalam pembangunan harian, kami boleh mengoptimumkan lagi fungsi ini mengikut keperluan khusus dan mencipta alat Javascript yang lebih cekap dan praktikal.

Atas ialah kandungan terperinci Apakah fungsi butang padam javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!