javascript - 添加按钮上显示多个div 点击如何通过删除按钮删除同一个div

Question

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 方法，但它对我不起作用。提前致谢。

标签： javascripthtmlbootstrap-4

Answer 1

function delete() {
   if(count > countMax)
      return;
   document.getElementById('dt-' + count + '').style.display = 'none';
   count++;
}

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