<div id="@("Bottomgrid)" class="dgd2"></div>

var element = document.getElementById("#Bottomgrid");
element.empty();

$('.dgd2').empty()

Instead of deleting only Bottom grid its also removing other Div present in the screen.

<div id="@("Bottomgrid)" class="dgd2"></div>

var element = document.getElementById("#Bottomgrid");
element.empty();

$('.dgd2').empty()

Instead of deleting only Bottom grid its also removing other Div present in the screen.

• javascript
• jquery
• html

• 1 show other div html ,,, does they have same id or class? – Amar Singh Commented Jul 11, 2016 at 11:44
• I think you mean document.getElementById("#Bottomgrid").remove() – gcampbell Commented Jul 11, 2016 at 11:44
• what id do you give the div? – Roysh Commented Jul 11, 2016 at 11:45

5 Answers 5

jQuery .remove() will remove the set of matched elements from the DOM.

While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.

Considering if you have your HTML as below :

<div id="Bottomgrid" class="dgd2"></div>

and you want to remove div with id="Bottomgrid" Then your javascript code will be :

$("#Bottomgrid").remove();

//This is not required as far as I see
//$('.dgd2').empty()

If you have a HTML structure like this:

<div class="holder">
    <div id="item1">Hey</div>
</div>

you can simply just use this pure JavaScript code to remove the "item1" element:

var element = document.getElementById("item1");
element.parentNode.removeChild(element);

.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()

Javascript :

document.getElementById("Bottomgrid").remove();

Jquery:

$( "#Bottomgrid" ).remove();

you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .

Html

                  <div id="bottomgridDiv" class="dgd2">
                        <div id="parentDiv" class="dgd2">
                            <div id="childDiv" class="dgd2">
                            </div>
                        </div>
                    </div>

Javascript

var element = document.getElementById("#bottomgridDiv");

  In JQuery:-
$("#bottomgridDiv").remove();

So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.