使用JavaScript單擊按鈕刪除div

Question

我已經創建了一個表格，該表格可以自我復制，但是我無法使“ 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，並且這應該以客戶端希望的任何順序進行。 但是，似乎無法正常工作。

Answer 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>

Answer 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>

使用JavaScript單擊按鈕刪除div

問題描述

2 個解決方案

解決方案1
1 已采納 2017-08-13 12:33:00

解決方案2
1 2017-08-13 13:25:13

使用JavaScript單擊按鈕刪除div

問題描述

2 個解決方案

解決方案1 1 已采納 2017-08-13 12:33:00

解決方案2 1 2017-08-13 13:25:13

解決方案1
1 已采納 2017-08-13 12:33:00

解決方案2
1 2017-08-13 13:25:13