Create and remove HTML-Element dynamically

Question

How can I create a HTML-Element dynamically, do something with it and then it should be removed. But it is important that it will be really deleted. Here is my approach:

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

As I mentioned, it is important to really delete the element, since the Function "createElement()" can often get invoked.

How can I test whether the new created HTML-Element is really removed?

I test as follows, whether the element is still existed, but I get always true!

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

Below are a two links, but they were not enough for, in order to solve my problem.

setting the id attribute of an input element dynamically

createElement and delete DOMElement

Thanks.

why you need to create a div, edit it and then remove it without even appending it to the dom? — BeNdErR
– BeNdErR, Commented Oct 12, 2014 at 21:49
Your mix of jQuery with plain Javascript hurts a little. Try newdiv.parentNode.removeChild(newdiv). — Ismael Miguel
– Ismael Miguel, Commented Oct 12, 2014 at 21:50
you didn't inject newdiv into the DOM, therefore you can't remove it from the DOM. Furthermore the ID of newdiv will be #MyDiv, but $('#MyDiv') gets the element with the ID MyDiv — Dr.Molle
– Dr.Molle, Commented Oct 12, 2014 at 21:51
As an example I used DIV, it can be any one element. If the item is no longer needed, it must be deleted (due to memory). — user3815508
– user3815508, Commented Oct 12, 2014 at 21:52

dTobon · Accepted Answer · 2014-10-12 22:31:45Z

3

try this one maybe is what you want:

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

dont forget to uncoment the //$(div).remove();

answered Oct 12, 2014 at 22:31

dTobon

2081 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3815508 Over a year ago

Yes, exactly! That's what I was looking for. It works very well, and the created object can be deleted. :). Thank you!

lexeek · Accepted Answer · 2014-10-12 22:02:00Z

1

First of all, I see, you have an error in your code in this line:

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

value of id attribute must not have '#' (the hash sign) - with your code element newdiv will have id like "#MyDiv" but this is not valid ID for jQuery, due to jQuery use this template for ID Selector (“#idName”)

You can dynamically delete the element with your way, but I guess previously you should to append it to another element on page using jQuery.append(you element/selector) method

edited Oct 12, 2014 at 22:02

answered Oct 12, 2014 at 21:53

lexeek

4105 silver badges8 bronze badges

3 Comments

user3815508 Over a year ago

Ok, it means, if I don't open the element in DOM, then I can not delete it?

user3815508 Over a year ago

Actually, where the element is generated when not in DOM? I thought that all elements are produced in DOM. Ok, I will investigate better about it :).

lexeek Over a year ago

>>then I can not delete it Nope, you can delete it. The created element placed in memory. You can work with it (newdiv) as you wish. But if you are using jquery and trying to find element by selector it supposes that elements is in DOM, in other case you can't found element.

Héctor · Accepted Answer · 2014-10-12 21:51:16Z

0

If you can use jQuery you can try with the following:

$( "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

answered Oct 12, 2014 at 21:51

Héctor

5092 silver badges7 bronze badges

3 Comments

user3815508 Over a year ago

Ok, but I want use the function createElement(). It is important for me to delete the created element.

Héctor Over a year ago

Check this: g=document.createElement('div'); g.setAttribute("id", "MyDiv"); g.innerHTML = "This is a test"

Ismael Miguel Over a year ago

"<div id="MyDiv">This is a test</div>" produces a syntax error. Use '<div id="MyDiv">This is a test</div>' instead.

Collectives™ on Stack Overflow

Create and remove HTML-Element dynamically

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related