Substitute Display None with Deleting Code from Source Code

Question

Hopefully this will make sense. I have a page where an user can create an div box. That user can create up to three div boxes. Attached to each box is a delete button that if pressed will turn that specific box display to none. When they reload the page the screen is empty again and they can create the div boxes again with no errors. Now let's say the user creates three div boxes, then deletes all three of them with the delete button. The user now with an empty screen decides to create one more div box. He does so and now there are two two div boxes with the same id's, since that same div box has already been created once and is now in display none.

Because there are two duplicated div boxes, it makes it difficult for jQuery events to fire when there are multiple id's on the same page. My question is, what could I replace with display none when I press the delete button to completely rid the code of the deleted div box? The code below is an example of what I mean there are duplicate div boxes, it was grabbed from firebug. (I purposely took out the delete button from each div box in the code below to simplify the problem. All that is needed to know is that it's duplicated between the old div box and the new one). This would need to be done with jQuery, Javascript, or PHP.

//this section was colored in a lighter opacity in Firebug

<div id="post_3" class="ui-widget-content" style="position: absolute; left: 523px; top: 

341.1px; z-index: 990; display: none;"></div>

<div id="post_2" class="ui-widget-content" style="position: absolute; left: 254px; top: 

196.1px; z-index: 990; display: none;"></div>

<div id="post_1" class="ui-widget-content" style="position: absolute; left: 2px; top: 

343.1px; z-index: 990; display: none;"></div>

//end of section

//this is the most recent div box created. It clashes with the first div box.

<div id="post_3" class="ui-widget-content" style="position: absolute; left: 0px; top: 

343.1px; z-index: 990;"></div>

//end of most recent div box code

Answer 1

Well... I don't see any delete buttons anywhere, so I can't be very specific, but what you probably want to use is $(selector).remove();

Answer 2

If you want to actually remove the item from the screen you can simply call the jQuery .remove() function.

Example - $("#element").remove();

Once you have done that, you will be able to "recycle" the element's id without causing problems.

Reference -

• remove()

Answer 3

If you want to delete the divs upon the button being clicked you can remove them instead of setting the display value by using jQuery's remove().

Attached to each box is a delete button that if pressed will turn that specific box display to none

Inside the button click, do $("specificDiv").remove() instead.

Answer 4

Yes, the function .remove() will help you!