使用JavaScript按钮单击删除div
使用JavaScript按钮单击删除div
提问于 2017-08-12 14:14:08
我已经创建了一个表单，它复制自己，但是我无法使'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，这应该按照客户机希望的任何顺序进行。然而，它似乎不起作用。
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-13 12:33:00
这就是我认为你想要的。
除了计数和删除兄弟姐妹之外，我尽量不进行任何硬编码，我还删除了所有内联事件处理程序。
$(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>
Stack Overflow用户
发布于 2017-08-13 13:25:13
我想这就是你需要的。在单个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45651229
复制相关文章
相似问题
腾讯云开发者
