Javascript 动态创建和删除HTML元素_Javascript_Jquery_Html_Css

Javascript 动态创建和删除HTML元素

javascript jquery html css

Javascript 动态创建和删除HTML元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,如何动态创建HTML元素，对其进行处理，然后将其删除。但重要的是，它将被真正删除。我的做法如下： var newdiv = document.createElement('div'); newdiv.setAttribute('id','MyDiv'); $('#MyDiv').css({'width':'100px','height':'100px'}); $('#MyDiv').html('This is a test'); $('#MyDiv').remove(); // It sh

如何动态创建HTML元素，对其进行处理，然后将其删除。但重要的是，它将被真正删除。我的做法如下：

var newdiv = document.createElement('div');
newdiv.setAttribute('id','MyDiv');
$('#MyDiv').css({'width':'100px','height':'100px'});
$('#MyDiv').html('This is a test');

$('#MyDiv').remove(); // It should be work ?

// Is it possible to delete it as follows?
newdiv.remove();

正如我提到的，删除元素非常重要，因为createElement函数经常被调用

如何测试新创建的HTML元素是否真的被删除

我测试如下，元素是否仍然存在，但我得到的总是真的

alert(  $('#MyDiv').length == 1);

下面是两个链接，但它们还不够，为了解决我的问题

谢谢。

如果您可以使用jQuery，您可以尝试以下操作：

$( "body" ).append( "<div id="MyDiv">This is a test</div>" ); // Create MyDiv div before </body> tag (you can use .prepend( ... ) to create it after <body>)

$("#MyDiv").css({'width':'100px','height':'100px'}); // Give some style to MyDiv

$("#MyDiv").remove(); // Delete MyDiv

首先，我明白了，这行代码中有一个错误：

newdiv.setAttribute('id','#MyDiv')

id属性的值不能有散列符号-对于代码元素，newdiv将具有类似于MyDiv的id，但这对于jQuery无效，因为jQuery将此模板用于id选择器“idName”

您可以按自己的方式动态删除元素，但我想之前您应该使用jQuery将其附加到页面上的另一个元素。appendyou element/selector方法

别忘了取消注释/$div.remove

为什么您需要创建一个div，编辑它，然后删除它，甚至不将它附加到dom中？jQuery与普通Javascript的混合会有点伤害。请尝试newdiv.parentNode.removeChildnewdiv。您没有将newdiv注入DOM，因此无法将其从DOM中删除。此外，newdiv的ID将是MyDiv，但是$'MyDiv'获取ID为MyDiv的元素作为我使用DIV的示例，它可以是任何一个元素。如果不再需要该项目，则由于内存问题，必须将其删除。请尝试此确定，但我希望使用函数createElement。删除创建的元素对我来说很重要；g、 setAttributeid，MyDiv；g、 innerHTML=这是一个测试这是一个产生语法错误的测试。改为使用“这是一个测试”。好的，这意味着，如果我没有在DOM中打开元素，那么我就不能删除它？实际上，不在DOM中时元素是在哪里生成的？我认为所有元素都是在DOM中生成的。好的，我会调查得更好：。>>然后我不能删除它不，你可以删除它。已创建的元素放在内存中。您可以根据自己的意愿使用它newdiv。但若您使用jquery并试图通过选择器查找元素，那个么它假定元素在DOM中，在另一种情况下，您找不到元素。是的，没错！这就是我要找的。它工作得很好，创建的对象可以删除。非常感谢。

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
     var div =  document.createElement("div");
     $(function(){
        $("body").append( div);
        $(div).css({'width':'100px','height':'100px','border':'solid 1px black'}).html('This is a test');
        //$(div).remove();
     });
    </script>
  </head>
  <body>
  </body>
</html>