按钮ul显示内容点击删除li练习

原创于 2021-12-08 00:43:09 发布 · 280 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

JS 专栏收录该内容

91 篇文章

订阅专栏

本文通过实例代码介绍了使用JavaScript实现点击按钮删除HTML列表<ul>中的<li>元素，帮助前端开发者提升动态操作DOM的技能。

<div class="container">
        <input type="text" name="content"><button id="add-btn">添加</button>
        <ul></ul>

        <script>
               function fn(){
                   var ipt = document.querySelector('input[name="content"]')
                   var btn = document.querySelector('#add-btn')
                   var ul = document.querySelector('ul')

                   btn.onclick = function(){
                       var value = ipt.value
                       var li = document.createElement('li')
                       var textNode = document.createTextNode(value)
                       li.appendChild(textNode)
                       ul.appendChild(li)
                          
                       ipt.value = ''
                       remove()
                   }
               }

               function remove(){
                   var li = document.querySelectorAll('li')
                   for(var i=0;i<li.length;i++){
                       li[i].onclick = function(){
                           this.remove()
                       }
                   }
               }
               fn()