Tell me, please, as in JavaScript (without using jQuery and so on libraries), delete completely the construction of the <div id="id1"></div> block and its contents:

 <div id="main"> <div id="id1"> <span class="class1"> Текст1 </span> </div> <div id="id2"> <span class="class2"> Текст2 </span> </div> </div>

It should be:

 <div id="main"> <div id="id2"> <span class="class2"> Текст2 </span> </div> </div>

Thank!

    4 answers 4

     document.getElementById("id1").remove(); 
     <div id="main"> <div id="id1"> <span class="class1"> Текст1 </span> </div> <div id="id2"> <span class="class2"> Текст2 </span> </div> </div>

      For example:

       var parent = document.getElementById("main"); var child = document.getElementById("id1"); parent.removeChild(child); 
       <div id="main"> <div id="id1"> <span class="class1"> Текст1 </span> </div> <div id="id2"> <span class="class2"> Текст2 </span> </div> </div>

        Something like this:

         var div = document.getElementById("id1"); div.parentNode.removeChild(div); 
         <style> div[id^="id"] { padding: 15px; margin: 10px; border: 1px solid #d6e9c6; border-radius: 4px; color: #3c763d; background-color: #dff0d8; } </style> <body> <div id="main"> <div id="id1"> <span class="class1"> Текст1 </span> </div> <div id="id2"> <span class="class2"> Текст2 </span> </div> </div> </body>

        I think it would be very useful to explore this educational resource :)

           document.getElementById("id1").outerHTML='';

          Browser Support

          It remains to add that the method proposed by Elena Semenchenko is more verbose, but more reinforced concrete.
          The method proposed by Dmitriy Kondratiuk is clearer, but for example donkeys will not work.