Remove element completely from div

Question

I've got multiple svg with a common class.

<div id="holder">
   <svg width="100" height="100" class="circle">
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   </svg>
</div>

How can I remove it completely? I tried .empty(); and remove(); but did not work?

$('#removeBtn').click(function(){
    $('.circle').remove();
});

Answer 1

I am guessing you missed a DOM ready handler :)

eg

$(function(){
    $('#removeBtn').click(function(){
        $('.circle').remove();
    });
});

$(function(){}) is just a handy shortcut for $(document).ready(function(){})

Answer 2

your html

   <div id="holder">
       <svg width="100" height="100" class="circle">
         <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
       </svg>
    </div>

<button id="removeBtn" >remove</button>

and js

$('#removeBtn').click(function(){

    $('.circle').remove()
});

here the fiddle

https://jsfiddle.net/ptosn8w6/1/