文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >显示在add按钮上的多个div单击如何通过delete按钮删除同一div

问显示在add按钮上的多个div单击如何通过delete按钮删除同一div
EN

Stack Overflow用户
提问于 2020-12-31 00:10:35
回答 2查看 40关注 0票数 1

​

代码语言：javascript
复制
var count = 2;
var countMax = 5;

function adddt() {
  if (count > countMax)
    return;
  document.getElementById('dt-' + count + '').style.display = 'block';
  count++;
}
代码语言：javascript
复制
<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。现在，我想在单击delete或minus按钮时隐藏相同的div。请求您指导我该如何解决这个问题。我尝试使用show hide方法，但对我不起作用。提前谢谢。

javascript
html
bootstrap-4
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-12-31 00:31:18

你可以这样做

代码语言：javascript
复制
<!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>
票数 1
EN

Stack Overflow用户

发布于 2020-12-31 00:16:03

代码语言：javascript
复制
function delete() {
   if(count > countMax)
      return;
   document.getElementById('dt-' + count + '').style.display = 'none';
   count++;
}

如果您将值更改为"display: none;"而不是"display: block;"，它将起作用。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/65509992

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档