如何在移动元素后使用jquery删除元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在移动元素后使用jquery删除元素相关的知识，希望对你有一定的参考价值。
我想动态创建，删除div，创建后将对其进行移动。
1）在创建/删除后似乎可以正常工作。如果只是简单地重复创建/删除，则'hello-id'div不会出现在中。 （可能不是...被删除的项目将再次显示。请参阅步骤2）
// HTLM
<body>
<div id='insert1'>
<div id='insert2'>
</div>
</div>
</body>
// javascript
$("body").append($("<div id='hello-id'>hello</div>"));
$('#hello-id').remove()
// html after create/delete. Correct! 'hello-id' div is removed
// from <body>. It can't be found.
<body>
<div id='insert1'>
<div id='insert2'>
</div>
</div>
</body>
2）如果移动了'hello-id'div，则此方法不起作用。移动后便无法删除。同样，在步骤1中删除的项目将再次显示，并且出现的次数取决于创建/删除周期。
// HTLM
<body>
<div id='insert1'>
<div id='insert2'>
</div>
</div>
</body>
// Javascript
$("body").append($("<div id='hello-id'></div>"));
$('#hello-id').insertBefore($('#insert2'));
//$('hello-id').remove()
// HTML after. Assume #1 is performed with 1 cycle. 'hello-id' div
// is removed from <body>.
// 2 'hello-id' div show up. BUT, it should be 1!
<body>
<div id='insert1'>
<div id='hello-id'>
</div>
<div id='hello-id'>
</div>
<div id='insert2'>
</div>
</div>
</body>
3）执行删除。但是，还剩1个。
// Javascript
$('#hello-id').remove()
// HTML
<body>
<div id='insert1'>
<div id='hello-id'>
</div>
<div id='insert2'>
</div>
</div>
</body>
我确定在步骤＃1中成对执行了创建/删除操作。顺便说一下，在执行Jquery $（'hello-id'）。show（），$（'hello-id'）。hide（）的过程中。
如果元素四处移动，Jquery remove（）函数怎么了？
答案
我已经尝试过您编码，并且可以正常工作。顺便说一句，您的示例在$（'＃hello-id'）和$（'＃insert2'）中缺少＃，请查看是否是您的问题...
$("body").append($("<div id='hello-id'>Hello</div>"));
$('#hello-id').insertBefore($('#insert2'));
$('#hello-id').remove(); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id='insert1'>
<div id='insert2'>
</div>
</div>
</body>另一答案
好，我想我现在有问题了。
每次执行该操作：
$("<div id='hello-id'></div>");
jQuery将创建一个新元素，这样您将获得id =“ hello-id”的重复div。
您需要将该元素保留在变量中并追加变量，如下所示：
var divHello = $("<div id='hello-id'></div>");
// Step 1
$("body").append(divHello);
$('#hello-id').remove();
// Step 2
$("body").append(divHello);
$('#hello-id').insertBefore($('#insert2'));
// Step 2 again (should not duplicate now)
$("body").append(divHello);
$('#hello-id').insertBefore($('#insert2'));
// Step 3 (now you'll be able to remove, just because there is only one div hello-id)
$('#hello-id').remove();
这样（添加divHello变量而不是“ $（）” jQuery选择器），您将不会创建新的div“ hello-id”，它只会在现有的div“ hello-id”中“放入”和“移动” html。
让我知道这是否解决了问题。
以上是关于如何在移动元素后使用jquery删除元素的主要内容，如果未能解决你的问题，请参考以下文章