Fatal编程技术网
  • javascript/
  • 使用JavaScript通过单击按钮删除div

使用JavaScript通过单击按钮删除div

javascript jquery html css

使用JavaScript通过单击按钮删除div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经创建了一个表单，其中它会复制自身，但是我无法使“x”按钮根据需要删除它所表示的div 我将两个按钮从div中取出，如下所示： <button type="button" id="cross" class="buttonImgTop" onclick="remChild()"></button> <div id="ValuWrapper"> ...content comes here... </div> <button type="but

我已经创建了一个表单，其中它会复制自身，但是我无法使“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>


var i=0；
var original=document.getElementById（'ValuWrapper'）；
var crossButton=document.getElementById（'cross'）；
var n=0；
函数重复（）{
var clone=original.cloneNode（true）；
var crossBut=crossbuton.cloneNode（真）；
clone.id=“ValuWrapper”++i；
crossut.id=“cross”+i；
crossButton.parentNode.appendChild（crossBut）；
original.parentNode.appendChild（克隆）；
//用于remChild（）函数
n=i；
}
函数remChild（）{

对于（i=0；i这就是我认为你想要的

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



$（函数（）{
var$original=$（“#ValuWrapper”），
$crossButton=$（“#cross”），
$content=$（“#content”）；
$content.on（“单击“，”.cross”，函数（）{
if（$（this）.is（#cross”））返回false；
var$cross=$（此项）；
$（this）.next（）.slideUp（400，函数（）{
$（this.remove（）；
$cross.remove（）；
});
});
$（“#重复”）。在（“单击”，函数（）{
$content.append（$crossButton.clone（true.removeAttr（“id”））；
$content.append(
$original.clone（真）
.hide（）//如果滑动
.attr（“id”），$original.attr（“id”）+$content.find（“button.cross”）.length）
.slideDown（“slow”）//不会滑动太多，因此如果不喜欢，请删除它
);
});
})；


#内容{高度：100%}



X
…内容在此显示…

…内容在此显示…


添加
我认为这是您需要的。在单个html中添加了完整的代码。尚未使用任何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>




var i=0；
原始变量；
var交叉按钮；
var n=0；
函数重复（）{
var clone=original.cloneNode（true）；
var crossBut=crossbuton.cloneNode（真）；
clone.id=“ValuWrapper”++i；
crossut.id=“cross”+i；
$（交叉符号）.text（“交叉符号”+i）；
crossButton.parentNode.appendChild（crossBut）；
original.parentNode.appendChild（克隆）；
//用于remChild（）函数
n=i；
}
功能remChild（obj）{
$（$（obj.next（））.slideUp（400，函数（））
{
$（obj）.next（）.remove（）；
$（obj.remove（）；
});           
}
$（文档）.ready（函数（）{
original=document.getElementById（'ValuWrapper'）；
crossButton=document.getElementById（'cross'）；
$（“.buttonImg”）。单击（函数（）{
重复（）；
});
$（“body”）。在（“单击“，”.buttoningtop”，函数（）上{
雷姆柴尔德（本）；
});
});       
我的第一个JavaScript
去除
…这里有内容。。。
重复

1.您需要搜索循环闭包。2.不要使用id。使用3.不要混合使用DOM和jQueryplease提供您的html@mplungjan为什么我们不能用“break”来代替呢？循环闭包在JavaScript中看起来非常混乱，因为我无法理解在函数中有一个函数然后调用该函数。但是，这会停止吗p一旦操作完成，循环一次？@amitwadhwani我在帖子中添加的代码仅被克隆/删除。没有使用其他代码。请澄清为什么需要整个HTML。是的，这正是我想要的！非常感谢！我只是想知道是否可以隐藏或不允许删除第一个div还有，为什么Div没有被命名为ValuWrapper1、ValuWrapper2等等。它似乎是从ValuWrapper到ValuWrapper13、ValuWrapper26等等。而我以前的代码是按顺序给它编号的。更新。我这里的代码显示了ValuWrapper、ValuWrapper1、2等等-您的内容中有更多的潜水-然后更改为content.find（“button.cross”）。更新后的代码不会删除，因为cross的id在整个页面中都是相同的，必须为其提供一个类似于ValuWrapper的唯一id。要解决此问题，我们需要添加与为ValuWrapper提供新id相同的代码行。当然，它会-我不使用div或button的id-您不需要添加任何东西-我在ValueWrapper中添加了一个ID，只是因为您似乎需要它来做一些事情。我认为我的上述解决方案也有按钮的顺序。我认为我的解决方案在使用jQuery和Domage时更加优雅和一致，学习您的编码方式对我来说是一个很好的学习。但我的逻辑不依赖于d的数量我认为这是一个很好的观点。你的观点？我只是数一数按钮来给出一个新的ID。据我所知，它甚至不需要。完全没有依赖性