使用 JavaScript 单击按钮删除 div答案

【问题标题】：Remove div with button click using JavaScript使用 JavaScript 单击按钮删除 div
【发布时间】：2018-01-20 22:01:16
【问题描述】：

我已经创建了一个表单，它会自我复制，但是我无法让“x”按钮根据需要删除它所代表的 div。

我将两个按钮都放在了 div 之外，如下所示：

<button type="button" id="cross" class="buttonImgTop" onclick="remChild()"></button>
<div id="ValuWrapper"> ...content comes here... </div>
<button type="button" class="buttonImg" onclick="repeat()"></button>

每次单击“+”号以在网站上添加更多表单时，都会克隆和复制“x”按钮和“div”。

这里是克隆和删除表单的代码：

<script>        
    var i = 0;
    var original = document.getElementById('ValuWrapper');
    var crossButton = document.getElementById('cross');
    var n = 0;

    function repeat() {
      var clone = original.cloneNode(true);
      var crossBut = crossButton.cloneNode(true);
      clone.id = "ValuWrapper" + ++i;
      crossBut.id = "cross" + i;
      crossButton.parentNode.appendChild(crossBut);
      original.parentNode.appendChild(clone);     
      // used for remChild() function
      n = i;

}

    function remChild(){

        for(i = 0; i <= n; i +=1)
        {
        $("#cross"+[i]).click(function () {
            $("#ValuWrapper"+[i]).slideUp(400, function () {
                    $("#ValuWrapper"+[i]).remove();
                    $(this).remove();
                });
          });
        }
    }
</script>

我想要做的是当单击“x”按钮时，动画“slideUp()”在指定的 div 上工作，然后删除按钮和 div，这应该以客户希望的任何顺序发生。但是，它似乎不起作用。

【问题讨论】：

1.您需要搜索闭环。 2.不要使用id。使用closest method 3. 不要混用DOM和jQuery
请提供您的html
@mplungjan 为什么我们不能使用'break'来代替？循环闭包在 JavaScript 中看起来非常令人困惑，因为我无法理解在函数中包含一个函数然后调用该函数。但是，一旦操作完成一次，这会停止循环吗？
@amitwadhwani 我在帖子中添加的代码只是被克隆/删除的代码。没有使用其他代码。请说明为什么需要整个 HTML。

标签： javascript jquery html css

【解决方案1】：

这就是我认为你想要的。

我尽量不硬编码，只计算和删除兄弟姐妹我还删除了所有内联事件处理程序

$(function() {
  var $original = $('#ValuWrapper'),
    $crossButton = $('#cross'),
    $content = $("#content");

  $content.on("click", ".cross", function() {
    if ($(this).is("#cross")) return false;
    var $cross = $(this);
    $(this).next().slideUp(400, function() {
      $(this).remove();
      $cross.remove();
    });
  });

  $("#repeat").on("click", function() {
    $content.append($crossButton.clone(true).removeAttr("id"));
    $content.append(
      $original.clone(true)
      .hide() // if sliding
      .attr("id",$original.attr("id")+$content.find("button.cross").length)
      .slideDown("slow") // does not slide much so remove if you do not like it
    );
  });

});

#content { height:100%}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="content">
  <button type="button" class="buttonImgTop cross" id="cross">X</button>
  <div id="ValuWrapper"> 
    ...content comes here... <br/>
    ...content comes here... <br/>
  </div>
</div>
<button type="button" class="buttonImg" id="repeat">Add</button>

【讨论】：

是的，这正是我想要的！非常感谢！我只是想知道是否可以隐藏或不允许删除具有该信息的第一个 div。另外，为什么 Div 没有被命名为 ValuWrapper1、ValuWrapper2 等。它似乎从 ValuWrapper 到 ValuWrapper13、ValuWrapper26 等。虽然我之前的代码按顺序对其进行了编号。
已更新。我的代码在这里显示了 ValuWrapper、ValuWrapper1、2 等
啊 - 你的内容有更多的潜水 - 然后更改为 content.find("button.cross")。
更新后的代码不会被删除，因为 cross 的 id 在整个页面中都是相同的，它必须被赋予一个类似于 ValuWrapper 的唯一 id。为了解决这个问题，我们需要添加为 ValuWrapper 提供新 ID 的同一行代码。
当然会 - 我没有使用 div 或按钮的 ID - 你不需要添加任何东西 - 我向 ValueWrapper 添加了一个 ID，只是因为你似乎需要它来做某事

【解决方案2】：

我认为这就是你所需要的。在单个 html 中添加了完整代码。 Havnt 使用过任何 CSS，但它是您正在寻找的一个工作示例。您可以根据需要更新副本内容。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
var i = 0;
var original; 
var crossButton ;
var n = 0;
function repeat() {
      var clone = original.cloneNode(true);
      var crossBut = crossButton.cloneNode(true);
      clone.id = "ValuWrapper" + ++i;
      crossBut.id = "cross" + i;
      $(crossBut).text("corss"+i);
      crossButton.parentNode.appendChild(crossBut);
          original.parentNode.appendChild(clone);     
          // used for remChild() function
          n = i; 
}

function remChild(obj){
    $($(obj).next()).slideUp(400,function()
    {
        $(obj).next().remove();
        $(obj).remove();
    });           
 }

$(document).ready(function(){
    original = document.getElementById('ValuWrapper');
    crossButton = document.getElementById('cross');

    $(".buttonImg").click(function(){
        repeat();
    });

    $("body").on("click",".buttonImgTop",function(){
        remChild(this);
    });
});       

</script>
<body>

<h2>My First JavaScript</h2>

<button type="button" id="cross" class="buttonImgTop" >remove</button>
<div id="ValuWrapper"> ...content comes here... </div>
<button type="button" class="buttonImg" >repeat</button>


</body>
</html>

【讨论】：

我认为我上面的解决方案也有按钮的顺序
我认为我的解决方案在使用 jQuery vs DOM 方面更加优雅和一致
同意，学习你的编码方式对我来说是一个很好的学习。
但我的逻辑不依赖于 div 的数量，我认为这是一个好点。你的看法？
我只是计算按钮以提供新 ID。据我所知，它甚至不需要。完全没有依赖