动态购物列表了解一下（前端）

最新推荐文章于 2024-05-16 07:50:43 发布

better body

最新推荐文章于 2024-05-16 07:50:43 发布

阅读量273

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wqewq19/article/details/81583068

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

这里写图片描述

index.html

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <meta charset="UTF-8"/>
      <style>
        body{


            background: bisque;
        }
      </style>
    </head>
    <body >
    <h1 style="text-align: center;">My shopping list</h1>   
    <div style="border: 1px solid black;width: 400px;margin: auto;"> 
        Enter a new item:<input /><button id="addItem">Add item</button>

    <ul style="width: 200px;margin: auto;">
        </ul>
    </div>

    <script>
        var ctn=0;
        var addItem =document.getElementById('addItem');
        var input = document.querySelector('input');
        addItem.onclick =function(){

            var listItem = document.createElement('li');
            listItem.style.margin=0+'px';
            var span = document.createElement('span');
            var button = document.createElement('button');
            button.innerHTML='delete';
            button.setAttribute('id','id'+ctn);
            span.innerHTML=input.value+ctn++;
            listItem.appendChild(span);
            listItem.appendChild(button);

            var list = document.querySelector('ul');
            list.appendChild(listItem);

            button.onclick= function(){
                listItem.parentNode.removeChild(listItem)
            }
        }


    </script>

    </body>
</html>