js实现动态添加删除(留言板)

介绍:仿照留言板写一个类似的实例,具有添加、删除的简单功能

思路:点击发布按钮,利用DOM操作进行元素添加【appendChild()】,点击删除按钮,利用DOM找到父节点,进行删除【removeChild()

DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style type="text/css">
        .liuyan{width: 70%;height: 150px;box-sizing: border-box;border: 1px dashed aqua;margin-bottom: 15px;}
        .pic{width: 150px;height: 150px;float: left;}
        .text{width:400px;height: 150px;float: left;}
        .delete{height: 150px;float: left;}
    style>
head>
<body>
    <div id="demo" style="width: 65%;margin: 0 auto;">
        <div>
            <textarea rows="6" cols="80" id="content">textarea>
            <button id="submit">发布button>
        div>

        <div class="liuyan">
            <div class="pic"><img src="img/703.jpg" width="150" height="150">div>
            <div class="text">努力学习,让学习成为一种习惯div>
            <div class="delete"><input type="button" name="del" value="删除" onclick="del(this)">div>
        div>
        <div style="clear: both;">div>

    div>

    <script>
        var demo = document.getElementById('demo');
        var submit = document.getElementById('submit');
        submit.addEventListener('click',add);

        function add(){
            var content = document.getElementById('content').value;
            var div = document.createElement('div');
            div.setAttribute('class','liuyan');
            //
            var div1 = document.createElement('div');
            var div2 = document.createElement('div');
            var div3 = document.createElement('div');
            div1.setAttribute('class','pic');
            div2.setAttribute('class','text');
            div3.setAttribute('class','delete');
            div.appendChild(div1);
            div.appendChild(div2);
            div.appendChild(div3);
            //
            var img = document.createElement('img');
            img.setAttribute('src','img/703.jpg');
            img.setAttribute('width','150');
            img.setAttribute('height','150');
            div1.appendChild(img);
            //
            var del = document.createElement('input');
            del.setAttribute('type','button');
            del.setAttribute('name','del');
            del.setAttribute('value','删除');
            del.setAttribute('onclick','del(this)');
            div3.appendChild(del);
            //
            div2.innerHTML = content;
            demo.appendChild(div);
            alert('发布成功');
        }
        function del(obj){
            var del = obj.parentNode;
            var liuyan = del.parentNode;
            var demo = liuyan.parentNode;
            demo.removeChild(liuyan);
        }
    script>
body>
html>

js实现动态添加删除(留言板)_第1张图片

 

转载于:https://www.cnblogs.com/whs5280/p/9750771.html

你可能感兴趣的:(js实现动态添加删除(留言板))