时间戳

首页 > 解决方案 > 如何停止 JavaScript 元素在点击时清除所有内容

javascript - 如何停止 JavaScript 元素在点击时清除所有内容

问题描述

单击“添加更多”时产生的第一个删除工作正常，但del之后产生的元素会删除页面上存在的所有内容。有人可以帮我吗，也许有问题ele，我对JS没有太多经验

重现步骤 ：

  1. 单击添加更多，然后单击上一个添加更多创建的下一个添加更多。

  2. 点击最后一个del

  3. 它会删除所有内容，而不是非常删除DIV

$(function() {
  $(".btn-copy").on('click', function() {
    var ele = $(this).closest('.example-2').clone(true);
    ele.find('input').val('')
    if (ele.find('button').length<2) {
      let btn = document.createElement("button");
      btn.innerHTML = "Delete";
      btn.onclick = (e) => {
        e.preventDefault()
        ele.remove()
      }
      ele[0].appendChild(btn);
    }
    $(this).closest('.example-2').after(ele);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-header">
        <h5 class="card-title">Add Class</h5>
      </div>
      <div class="card-body">
        <form action="#">
          <div class="example-2 form-group row">
            <!--<label class="col-form-label col-md-2">Input Addons</label>-->
            <div class="col-xs-2">
              <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text">Class Name</span>
                </div>
                <input class="form-control" type="text">
                <div class="input-group-append">
                  <button class="btn-copy btn btn-primary" type="button">Add More</button>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group row">
            <div class="col-xs-2">
              <button class="btn btn-primary" type="button">Submit</button>
            </div>
          </div>


        </form>
      </div>
    </div>
  </div>
</div>

标签： javascripthtmljquery

解决方案

问题在于使用.clone()

您在哪里克隆了最新的克隆元素，这迫使您创建一个 if 语句以防止创建多个删除按钮。但这也不允许您在克隆一定数量的节点后执行 if 语句中的内容。

您也不能在 if 语句之外使用 btn 变量。

解决方案是始终克隆第一个example-2元素，这样我们就可以跳过 if 语句的使用，并允许自由使用 btn 变量。

我添加了一个额外的 div#wrapper来使用，因此每次都可以复制find('div').first()相同的元素。example-2

片段

$(function() {
  $(".btn-copy").on('click', function() {
    
    var ele = $('#wrapper').find('div').first().clone(true);
    ele.find('input').val('');
    
    let btn = document.createElement("button");
    btn.innerHTML = "Delete";
    ele[0].appendChild(btn);

    btn.onclick = (e) => { ele.remove() };
    $(this).closest('.example-2').after(ele);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div class="example-2 form-group row" style="margin-top:15px">
    <div class="col-xs-2">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">Class Name</span>
        </div>
        <input class="form-control" type="text">
        <div class="input-group-append">
          <button class="btn-copy btn btn-primary" type="button">Add More</button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-xs-2">
      <button class="btn btn-primary" type="button" style="margin-top:30px">Submit</button>
    </div>
  </div>
</div>

推荐阅读