初学js是不是特别想知道,如何做到页面的增删功能呢?接下来,就让我们往下学吧!
- body代码:
<textarea name="" id="say" cols="40" rows="5"></textarea>
<input type="submit" value="发表说说" id="count">
<h2>说说列表:</h2>
<div class="con">
<ul></ul>
</div>
- js代码:
<script src="../JS/jquery-3.3.1.min.js"></script>
<script>
var num=1;
// 给发表说说一个点击事件
$("#count").click(function(){
// 获取说说内容
var says=$("#say").val();
if(says==""){
alert("不能为空!");
// $("#say").focus();
$("#say").css("border","1px solid red");
return;
}
else{
// 从下至上 prependTo()
// $("<li>"+num+"楼"+says+"</li><a href='#' id='del'>删除该条说说</a>").prependTo(".con ul");
// 从上至下 appendTo()
// a标签在li标签里
$("<li>"+num+"楼"+says+"<a href='#' οnclick='del(this)'>删除该条说说</a></li>").appendTo(".con ul");
// a标签在li标签外
// $("<li>"+num+"楼"+says+"</li><a href='#' οnclick='del(this)' class='elt'>删除该条说说</a>").appendTo(".con ul");
$("#say").val("");
num++;
}
});
// 给删除说说做一个点击事件
function del(obj){
if(confirm("是否删除该行?")){
// a标签在li标签里
$(obj).parent().remove();
// a标签在li标签外
// $(obj).prev().remove();
// $(".elt").remove();
}
}
</script>
- 效果图: