Adding and deleting div dynamically in JavaScript

Question

3.33/5 (3 votes)

See more:

Please check the code.

What I want to do is, i want to add divs dynamically to DivUserMailList(MainDiv) and if I want to delete, I have to delete dynamically.

ie, first I added 5 divs with ids div0 to div4. Now I deleted div2, div5.

Please check str in the code, To remove div, I want to click on the div which was created dynamically by

str<br />

So now I want adding divs,removing divs and remaining div's contents, but the code I wrote is not working in such a way.

C#

for (i = 0; i < tempRes.value.Count; i++) {
           s = "chk" + tempRes.value.UserLoginListDet[i].UserLoginId + i;
           if (document.getElementById(s).checked) {

               str = "<div id='div" + divcnt + "' class='DivUserIds'><div id='DivUid' >" + tempRes.value.UserLoginListDet[i].UserLoginId + "</div><div id='DivUidCross' class=\"CrossIconDiv\" OnClick='RemoveDivElement('DivUserMailList'," + divcnt + ");'></div></div>";
               divcnt = divcnt + 1;

           }
       }

      document.getElementById("DivUserMailList").innerHTML = str;

Please help me.

Thanks in advance.

Posted 15-Apr-11 21:20pm

Sridhar Patnayak

Updated 16-Apr-11 13:50pm

Indivara

v4

Add a Solution

Comments

Indivara 16-Apr-11 19:51pm

Fixed language (linked from tip http://www.codeproject.com/Tips/182522/StringBuilder-in-Javascript-asp-net-3-5-and-above-.aspx)

3 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Jeffrey Enzo · Answer 1 · 2011-04-15T21:25:00

Solution 1

Removing your DIV:

var div = document.getElementById('DOM');

if (div) {    

div.parentNode.removeChild(div);

}

Add a DIV

var msgContainer = document.createElement('div');
msgContainer.id = 'DOM';
msgContainer.className = 'YurClass';
msgContainer.appendChild(document.createTextNode(msg));
document.body.appendChild(msgContainer);

Posted 15-Apr-11 21:25pm

Jeffrey Enzo

Comments

Sridhar Patnayak 16-Apr-11 3:30am

Please check "str" in the above code, To remove i want to click on the div which was created dynamically by "str", so the code you chosen is not sufficient to do this task

koolprasad2003 · Answer 2 · 2011-04-15T23:20:00

Solution 2

Rather than adding and deleting DIV just make
style.Display:none
and style.Display:''

Posted 15-Apr-11 23:20pm

koolprasad2003

amjadiqbalmd · Answer 3 · 2011-04-15T23:26:00

Solution 3

i cant agree more with Koolprasad2003, why dont you just hide them with css. use div id and hide it.
for ex:

<div id="content">
My Content
</div>


in style.css

#content
{
  display:none;
}

Hope this serves your purpose

Posted 15-Apr-11 23:26pm

amjadiqbalmd

Adding and deleting div dynamically in JavaScript

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Adding and deleting div dynamically in JavaScript

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us