JavaScript實(shí)現(xiàn)留言板添加刪除留言

更新時間：2021年06月30日 11:02:17 作者：廖若星辰LTY

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)留言板添加刪除留言，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文分享一個JavaScript的留言板添加留言、刪除留言的小案例，內(nèi)附詳細(xì)代碼分析、但不涉及數(shù)據(jù)庫操作，只解析底層代碼實(shí)現(xiàn)思路：

實(shí)現(xiàn)效果

運(yùn)行代碼界面：

輸入留言進(jìn)行添加：（最新的留言會在最頂部顯示）

刪除留言：（點(diǎn)擊哪條則刪除該條留言）

主要功能效果展示完畢，HTML和CSS樣式這里不影響，下面直接上JS代碼：

<script>
        // 獲取所需元素對象
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        // 注冊事件
        btn.onclick = function () { // 給發(fā)布按鈕綁定點(diǎn)擊事件
            if (text.value == '') { // 判斷text.value是否為空，即用戶是否有輸入內(nèi)容
                alert('不能發(fā)布空內(nèi)容哦！');
                return false;
            } else {    // 用戶有輸入內(nèi)容則獲取到該內(nèi)容賦值給創(chuàng)建的元素li進(jìn)行顯示
                // 1.創(chuàng)建元素
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;' title='刪除該留言'>刪除</a>";  // 將用戶輸入的內(nèi)容賦值給創(chuàng)建的li元素并且在后面添加一個a標(biāo)簽用于后續(xù)刪除該留言
                // 2.添加元素
                // ul.appendChild(li);  // 這樣寫留言是追加到后面顯示的
                ul.insertBefore(li, ul.children[0]);    // 讓新增的留言在最上面顯示，即從下往上顯示的順序
                
                // 刪除元素：刪除的是當(dāng)前a標(biāo)簽所在的li節(jié)點(diǎn)也就是它的父元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // 需要刪除的li是a的父元素即this.parentNode;
                        ul.removeChild(this.parentNode);    // 刪除ul里的li節(jié)點(diǎn)，而li是當(dāng)前a標(biāo)簽的父節(jié)點(diǎn)，注意它們之間的關(guān)系
                    }
                }
            }
            text.value = '';    // 最后將留言輸入框中的內(nèi)容清空方便再次留言
            
        }
</script>

核心知識：

向頁面添加元素節(jié)點(diǎn)：

我們想要給頁面添加一個新的元素分兩步：1.創(chuàng)建元素；2.添加元素

1.創(chuàng)建元素：element.createElement('創(chuàng)建的元素標(biāo)簽');
2.添加元素：node.appendChild(child); // node是父級即添加在哪個父級元素之中，child是創(chuàng)建好的子級元素，注：這樣的添加元素方式類似于數(shù)組中的push方法即在后面追加元素
添加節(jié)點(diǎn)到指定位置：（主要是添加到指定元素前面顯示）
node.insertBefore(child, 指定元素); // “指定元素”指將child添加到哪個元素的前面，“指定元素”一定也是node的子元素

刪除頁面元素節(jié)點(diǎn)：

node.removeChild(child);  // node是父元素，child是node中的一個子元素

主要實(shí)現(xiàn)思路：這里就是主要運(yùn)用向頁面添加節(jié)點(diǎn)和刪除節(jié)點(diǎn)的功能，將兩個功能各自綁定到不同的按鍵上，如將添加節(jié)點(diǎn)的功能給到“發(fā)布”按鈕，將刪除節(jié)點(diǎn)的功能給到“刪除”按鈕，即實(shí)現(xiàn)了這樣一個簡易版的留言板案例。詳細(xì)解析建議結(jié)合JS代碼，內(nèi)含詳細(xì)注釋。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: