與使用JavaScript

我創造它自身複製表單按鈕單擊刪除DIV但是我無法使「X」按鈕刪除根據需要將其代表的股利。與使用JavaScript

我把我的兩個按鈕進行股利的，如下圖所示：

<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」按鈕和「格」被克隆和複製每一個的「+」符號點擊添加更多形式的時間在網站上。

下面是這兩個克隆的形式，將其取出代碼：

<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」按鈕時，動畫「效果基本show（）」的作品上指定的div然後刪除按鈕和div，這應該發生在客戶端的任何順序。但它似乎不起作用。

來源

2017-08-12 Mazin Al-Bahrani

1.您需要搜索循環閉包。 2.不要使用ID。使用[最接近的方法（https://api.jquery.com/closest/）3.不要混合使用DOM和jQuery – mplungjan

請提供您的HTML –

@mplungjan我們爲什麼不能用「休息」呢？循環閉包在JavaScript中看起來如此令人困惑，因爲我無法理解在函數中有函數，然後調用該函數。但是，一旦動作完成一次，這會停止循環嗎？ –

這就是我想你想要的。

我儘量不硬編碼任何東西，但數和刪除的兄弟姐妹我還刪除所有行內的事件處理器

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

來源

2017-08-13 12:33:00 mplungjan

是的，這正是我想要的！非常感謝你！我只想知道是否可以隱藏或不允許刪除包含該信息的第一個div。另外，爲什麼該部門沒有被命名爲ValuWrapper1，ValuWrapper2等等。似乎它從ValuWrapper到ValuWrapper13，ValuWrapper26等等。而我以前的代碼給它編號的順序。 –

已更新。而我的代碼在這裏顯示ValuWrapper，ValuWrapper1，2等 – mplungjan

啊 - 你在你的內容有更多的潛水 - 然後換content.find（「button.cross」）。 – mplungjan

我覺得這是你所需要的。在單個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>

來源

2017-08-13 13:25:13

我認爲我的上述解決方案也有排序的按鈕以及 –

我認爲我的解決方案是更優雅和一致的使用jQuery與DOM – mplungjan

同意，它是一個很好的學習，讓我學習你編碼的方式。 –

與使用JavaScript

回答

相關問題