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>
I am using the above code to show multiple divs one by one by clicking on the 'add' button. Now I want to hide the same divs when I click on the delete or minus button. Requesting you please guide how can I solve this. I tried using the show hide method but it would not work for me. Thanks in advance.
function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
if you change value to "display: none;"
instead of "display: block;"
it will work.
you can do like this
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.