一個朋友提了個需求給我,如下:
點擊按鈕刪除input,如果input剩一個,點擊按鈕全部消失。
很簡單的操作,但是你如果不知道jquery里有prev()這個方法,可能你會走很多彎路。
代碼:
html
<div>
<input type="text" placeholder="用戶名">
<input type="text" placeholder="用戶名">
<input type="text" type="hidden">
<input type="text" type="hidden">
<a class="reduce" onclick="less()">—</a>
</div>
css
.reduce{
display: inline-block;
color: white;
text-align: center;
width: 30px;
height: 30px;
background: red;
line-height: 30px;
cursor: pointer;
}
input{
height: 18px;
padding: 5px 10px;
}
JS
<script src="jquery-1.7.2.min.js"></script>
<script>
var Reduce = document.getElementsByClassName("reduce");
var Inp = document.getElementsByTagName("input");
function less(){
//查找元素的上一個元素 并移除
$(".reduce").prev().remove();
if(Inp.length < 1){
$(".reduce").remove()
}
}
$(".reduce")
</script>
這里我混合寫的,不規(guī)范,只做一個栗子,重在理解。