使用JavaScript单击按钮删除div [英] Remove div with button click using JavaScript

问题描述

我创建了一个复制自身的表单，但是我无法使'x'按钮删除它所代表的div。

I have created a form where it duplicates itself however I am unable to make the 'x' button remove the div it represents as required.

我放置了我的两个div中的按钮如下所示：

I placed both my buttons out of the div as shown below:

<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'点击以在网站上添加更多表格。

The 'x' button and 'div' get cloned and duplicated every time the '+' sign is clicked to add more forms on the website.

以下是克隆表格并将其删除的代码：

Here is the code for both cloning the form and removing it:

<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，这应该按照客户端的任何顺序发生。然而，它似乎无法正常工作。

What I am trying to do is when the 'x' button is clicked, the animation 'slideUp()' works on the specified div then removes both the button and div and this should happen in any order the client would like. However it seems like it is not working.

推荐答案

这就是我想要你想要的。

This is what I THINK you want.

我尽量不对任何东西进行硬编码，但是计算并删除兄弟姐妹
我还删除了所有内联事件处理程序

I try not to hardcode anything but count and remove siblings I have also remove all inline event handlers

$(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>

这篇关于使用JavaScript单击按钮删除div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！