1. 程式人生 > >點擊按鈕添加和刪除塊

點擊按鈕添加和刪除塊

rem 觸發 保存 () pen -- query air ide

點擊按鈕添加塊

<form action="" id="repairmain" method="post">
<!-- 頁面內容-->
<div id="form">
<div class="repair_table" id="table">
<div><label class="name" name="name">維修手機:</label></div>
<div class="mt20"><label class="unique_code" name="unique_code">故障類型:</label></div>
<a onClick="closea(this)" class="btn btn-primary btn-lg active closex" role="button">關閉</a>
</div>
</div>
<div class="weui-btn-area">
<a onClick="submit_order()" class="weui-btn weui-btn_primary">新增配件掃碼</a>
<a onClick="submit()" class="weui-btn weui-btn_primary btn_table">提交</a>
</div>
</form>

<script type="text/javascript">
//最開始模塊次數為0
let count = 0;
//聲明變量用來保存拼接的模版
let model = `<div id="table">
<div><label class="name" id="id">維修手機:</label></div>
<div class="mt20"><label class="unique_code">故障類型:</label></div>
<a onClick="closea(this)" class="btn btn-primary btn-lg active closex" role="button">關閉</a>
</div>`
//觸發新增事件
function submit_order(){
let control = count === 0 ? true : false
if (control) {
$("#table").css({"display": "block"});
count++;
$(".btn_table").css({"display":"block"});
// console.log(count)
} else {
$("#form").append(model)
// console.log(model)
}

};

//點擊按鈕關閉當前行事件

//這裏主要記住傳遞參數 頁面事件參數this為當前,這裏傳遞一個this對應的參數,觸發刪除按鈕時直接刪除當前

function closea(r){
r.parentNode.remove();
}

</script>

根據jquery教程對元素有如下操作:

1.隱藏當前元素

$(this).hide();

2.隱藏所有<p>元素

$("p").hide();

3.隱藏所有chass="test"的<p>元素

$("p.test").hide();

4.隱藏所有di="test"的元素

$("#test").hide()

點擊按鈕添加和刪除塊