通过文本框输入内容,点击后面按钮,增加li,备忘录 ,每增加一个li,li后面增加超链接,点击超链接删除该li

最新推荐文章于 2022-10-12 09:30:01 发布

零度碳酸-

最新推荐文章于 2022-10-12 09:30:01 发布

阅读量1.4k

点赞数 2

分类专栏： JS基础练习题

本文链接：https://blog.csdn.net/weixin_41086056/article/details/88143063

版权

JS基础练习题专栏收录该内容

19 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            width: 300px;
            height:40px;
            line-height:40px;
            background: #eeeeee;
            list-style: none;
        }
        a{
            text-decoration: none;
            float: right;
            padding:5px;
            margin:5px;
            background: #dddddd;
            font-size:16px;
            line-height:16px;
            text-align: center;
            color: #000;
        }
    </style>
</head>
<body>
<input type="text" id="input">
<input type="submit" id="submit">
<ul id="ul"></ul>
<script>
    var input=document.getElementById("input");
    var submit=document.getElementById("submit");
    var ul=document.getElementById("ul");
    submit.addEventListener("click",clickHandler);
    function clickHandler(e) {
        var li=document.createElement("li");
        li.textContent=input.value;
        var a=document.createElement("a");
        a.textContent="删除";
        a.addEventListener("click",aClickHandler);
        li.appendChild(a);
        ul.appendChild(li);
    }
    function aClickHandler() {
        this.parentElement.remove();
    }
</script>
</body>
</html>

零度碳酸-

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
通过文本框输入内容,点击后面按钮,增加li,备忘录 ,每增加一个li,li后面增加超链接,点击超链接删除该li

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; li{ width: 300
复制链接

扫一扫

专栏目录