Question

如何动态创建HTML-Element，对其执行某些操作然后将其删除。但重要的是它会被真正删除。这是我的方法：

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();

正如我所提到的，真正删除元素很重要，因为函数＆＃34; createElement（）＆＃34;通常可以被调用。

如何测试是否真的删除了新创建的HTML-Element？

我测试如下，元素是否仍然存在，但我总是如此！

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

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

setting the id attribute of an input element dynamically

createElement and delete DOMElement

感谢。

Answer 1

尝试这个可能是你想要的：

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

不要忘记解开// $（div）.remove（）;

Answer 2

首先，我知道，您的代码中存在错误：

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

id属性的值不能有'＃'（井号） - 你的代码元素newdiv会有像“#MyDiv”这样的id，但这不是jQuery的有效ID，因为jQuery使用这个模板作为ID Selector （“#idName”）

你可以用你的方式动态删除元素，但我想以前你应该使用jQuery.append（你元素/选择器）方法将它附加到页面上的另一个元素

Answer 3

如果你可以使用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

动态创建和删除HTML-Element

3 个答案: