javascript小案例------发布和删除留言

效果如下:

代码思路:

   1. 添加部分

    点击按钮就创建一个li,然后把li添加到ul里面

     在创建li的时候要把文本域里面的值通过li.innerHTML赋值��lis

    如果想要新的留言显示到最后面就用appendChild

    如果想要显示最前面就用insetBefore

    2.删除部分

     当我们把文本域里面的值赋值给li的时候,多添加一个删除的连接

    需要把所有的连接获取过来,当我们点击当前链接时,删除当前链接所在的li

     阻止链接跳转需要添加javascript:void(0);或者javascript:;

html部分:

	<div class="box">
		<textarea placeholder="请输入您的留言"></textarea>
		<button type="button">确认发布</button>
		<ol>

		</ol>
	</div>

css部分:

	* {
			margin: 0;
			padding: 0;
		}

		.box {
			width: 158px;
			margin: 40px auto;
			text-align: center;
		}

		textarea {
			display: block;
			height: 100px;
			margin: 0 auto;
		}

		button {
			margin: 10px auto;
		}

		/* //添加到最后面不用去掉ol的样式 */
		ol {
			list-style: none;
		}

		li {
			margin: 10px auto;
			height: 20px;
			background-color: pink;

		}

		li a {
			text-decoration: none;
			float: right;
		}

javascript部分:

//获取元素
	var btn = doc = document.querySelector("button")
	var text = doc = document.querySelector("textarea")
	var ol = doc = document.querySelector("ol")

	btn.onclick = function () {
		if (text.value == "") {
			alert("请输入您的留言");
			return false;
		} else {
			//创建元素
			var li = document.createElement("li")
			li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";
			//添加元素
			//添加到最后面
			ol.appendChild(li)
			//添加到最前面
			// ol.insertBefore(li,ol.children[0])

			//删除元素	删除当前链接的li
			var as = document.querySelectorAll("a");
			for (var i = 0; i < as.length; i++) {
				as[i].onclick = function () {

					// node.removeChild(child)
					// 删除的是li  当前a所在的li this.parentNode
					ol.removeChild(this.parentNode);
				}
			}
		}

	}

CSDN话题挑战赛第1期
活动详情地址：CSDN