添加按鈕上顯示多個div 點擊如何通過刪除按鈕刪除同一個div
[英]Multiple div shown on the add button click how to delete the same div through the delete button
問題描述
var count = 2; var countMax = 5; function adddt() { if (count > countMax) return; document.getElementById('dt-' + count + '').style.display = 'block'; count++; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-3" align="right"> <button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div> <div class="row" id="dt-1" style="display: none;"> <div class="col-12" style="height: 40px;"></div> <div class="col-md-12"> <div class="form-group"> <div class="col-12 col-sm-3"> <label for=""></label> </div> <div class="col-12 col-md-6 Option"> <textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px;important:"></textarea> </div> <div class="col-sm-3" align="right"> <button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button> </div> </div> </div> </div> <div class="row" id="dt-2" style="display; none:"> <div class="col-12" style="height; 40px:"></div> <div class="col-md-12"> <div class="form-group"> <div class="col-12 col-sm-3"> <label for=""></label> </div> <div class="col-12 col-md-6 Option"> <textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width; 700px:important;"></textarea> </div> <div class="col-sm-3" align="right"> <button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button> </div> </div> </div> </div> <div class="row" id="dt-3" style="display: none;"> <div class="col-12" style="height: 40px;"></div> <div class="col-md-12"> <div class="form-group"> <div class="col-12 col-sm-3"> <label for=""></label> </div> <div class="col-12 col-md-6 Option"> <textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea> </div> <div class="col-sm-3" align="right"> <button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button> </div> </div> </div> </div>
我正在使用上面的代碼通過單擊“添加”按鈕一一顯示多個 div。 現在我想在單擊刪除或減號按鈕時隱藏相同的 div。 請求你請指導我該如何解決這個問題。 我嘗試使用 show hide 方法，但它對我不起作用。 提前致謝。
2 個解決方案
解決方案1
1 2020-12-30 16:16:02
function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
如果您將值更改為"display: none;" 而不是"display: block;" 它會起作用的。
解決方案2
1 已采納 2020-12-30 16:31:18
你可以這樣做
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(1)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(2)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(3)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</body>
<script>
var count = 1;
var countMax = 3;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
function deletdt(id)
{
document.getElementById('dt-' + id + '').style.display = 'none';
}
</script>
</html>
當我多次單擊“添加”按鈕時，它應該顯示“我在這里”，並帶有“刪除”按鈕多次
[英]when I click add button multiple times it should show I am here div with delete button with multiple times
單擊按鈕時如何選擇按鈕並刪除該按鈕的祖父格？
[英]How to select a button and delete a grandparent div of that button when the button is clicked?
如何使用javascript彈出div關閉按鈕並通過javascript刪除div
[英]how to javascript popup div close button working and div delete by javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.