cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk memadam item senarai tambahan menggunakan JavaScript?

Bagaimana untuk memadam item senarai tambahan menggunakan JavaScript?

王林
王林ke hadapan
2023-09-13 21:25:081190semak imbas

如何使用 JavaScript 删除已添加的列表项？

Dalam HTML, pembangun boleh menggunakan teg "ul" untuk membuat senarai item. Kami boleh menambah semua item yang berkaitan pada satu senarai. Kami juga boleh menggunakan JavaScript untuk mengurus item senarai.

Kadangkala, pembangun perlu menambah atau mengalih keluar item senarai menggunakan JavaScript. Kami boleh mengakses item senarai menggunakan nilai atribut tertentu dan mengalih keluar item senarai menggunakan kaedah removechild().

Dalam tutorial ini, kami akan mengambil input daripada pengguna dan mengalih keluar item senarai berdasarkan nilai.

Tatabahasa

Pengguna boleh memadam item senarai yang ditambah menggunakan javaScript mengikut sintaks berikut

var item = document.getElementById(ID);
list.removeChild(item);

Dalam sintaks di atas, kami menggunakan id untuk mengakses item senarai. Selepas itu, kami mengalih keluar item senarai yang dipilih daripada senarai menggunakan kaedah removechild().

Contoh 1 (Mengalih keluar elemen dinamik daripada senarai)

Dalam contoh di bawah, kami membuat senarai dengan id bersamaan dengan "kereta". Selain itu, kami mencipta kotak input untuk mendapatkan nilai item senarai daripada pengguna. Selain itu, kami mencipta butang tambah kereta dan keluarkan kereta yang memanggil fungsi addCar() dan removeCar() apabila pengguna mengklik pada butang yang sepadan.

Dalam JavaScript, kami mengakses senarai dan nilai input teks. Dalam fungsi addCar(), kami mula-mula mencipta item senarai dan kemudian menetapkan id item senarai. Seterusnya, kami mencipta nod teks, tambahkannya pada item senarai, dan kemudian gunakan kaedah appendchild() untuk menambahkan item senarai pada senarai. 

<html>
<body>
    <h2> Removing the <i> dynamic list items </i> from the list using JavaScript</h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        function removeCar() {
            var item = document.getElementById(carName.value);
            carList.removeChild(item);
        }
    </script>
</html>

Contoh 2 (Alih keluar elemen terakhir daripada senarai)

Dalam contoh di bawah, kami menggunakan JavaScript untuk mengalih keluar item senarai terakhir daripada senarai. Contoh ini sangat serupa dengan contoh pertama, kecuali kami mengalih keluar item senarai terakhir dalam contoh ini dan item senarai dinamik dalam contoh pertama.

Dalam fungsi removeCar(), kami menggunakan sifat 'lastElementChild' untuk mendapatkan elemen anak terakhir senarai. Selepas itu kita keluarkan elemen terakhir jika ia wujud.

Dalam output, pengguna boleh menambah berbilang item pada senarai dan klik butang padam untuk memadamkan elemen senarai. 

<html>
<body>
    <h2> Removing the <i> last list item </i> from the list using JavaScript </h2>
    <ul id = "cars">
    </ul>
    <input type = "text" id = "carName" />
    <button onclick = "addCar()"> Add car </button>
    <button onclick = "removeCar()"> Remove last car </button>
    <script>
        var carList = document.getElementById("cars");
        var carName = document.getElementById("carName");
        function addCar() {
            var li = document.createElement("li");
            li.setAttribute('id', carName.value);
            let text = document.createTextNode(carName.value);
            li.appendChild(text);
            carList.appendChild(li);
        }
        // function to remove the last element from the list
        function removeCar() {
            // select the last element
            var lastElement = carList.lastElementChild;
            // if the last element is present, then remove it
            if (lastElement) {
                carList.removeChild(lastElement);
            }
        }
    </script>
</html>

Contoh 3

Dalam contoh di bawah, kami menggunakan JavaScript untuk memadam semua item senarai. Di sini kami membuat senarai projek.

Dalam JavaScript, kami telah menentukan fungsi addItem() untuk menambah item dan fungsi clearAll() untuk mengalih keluar semua item daripada senarai. Dalam fungsi clearAll(), kami menggunakan atribut "firstchild" untuk mendapatkan anak pertama senarai dan menggunakan kaedah removechild() untuk mengalih keluar anak. Kami menggunakan gelung sementara untuk mengulang sehingga semua kanak-kanak senarai dialih keluar.

Dalam output, pengguna boleh menekan butang Kosongkan Semua untuk mengalih keluar semua item daripada senarai. 

<html>
<body>
   <h2> Removing the <i> all last list items </i> from the list using JavaScript</h2>
   <ul id = "itmes">
   </ul>
   <input type = "text" id = "itemValue" />
   <button onclick = "addItems()"> Add itmes </button>
   <button onclick = "clearAll()"> clear list </button>
   <script>
      var items = document.getElementById("itmes");
      var itemValue = document.getElementById("itemValue");
      function addItems() {
         var li = document.createElement("li");
         li.setAttribute('id', itemValue.value);
         let text = document.createTextNode(itemValue.value);
         li.appendChild(text);
         items.appendChild(li);
        }
        // function to clear all the list items
      function clearAll() {
         while (items.firstChild) {
         items.removeChild(items.firstChild);
         }
      }
   </script>
</html>

Kesimpulan

Pengguna belajar mengalih keluar item dinamik daripada senarai. Pendekatan asas ialah setiap item senarai harus mempunyai pengecam unik untuk mengakses dan memadam item senarai dinamik. Di sini kita menggunakan nilai item senarai sebagai id pengecam itu sendiri.

Dalam contoh kedua, kami mengalih keluar hanya elemen anak terakhir daripada senarai; dalam contoh ketiga, kami mengalih keluar semua item senarai bersama-sama.

Atas ialah kandungan terperinci Bagaimana untuk memadam item senarai tambahan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html while 标识符 循环 ul
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menggantikan elemen HTML dengan elemen lain menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menggantikan elemen HTML dengan elemen lain menggunakan JavaScript?

Artikel berkaitan

Lihat lagi