Remove div from DOM with Jquery

Question

I´m trying to remove the "closest" div with a class of: flak
I have tried using "parent" but it will remove a higher div.
I need to remove the div with a class of ".flak" and all it´s children.

HTML

<div class="well" id="flakDiv"> 
  <span id='deleteFlak' class='pull-right'>x</span>
  <div class="flak nopadding" id="77">
  <div class="flakSideUp nopadding"></div>
  <div class="flakMiddle">Flak <b><span>88<span></b><p>88</p></div>
  <div class="flakSideDown nopadding"></div>
</div><br>

Js

//Flak HTML setup
var flak = $('<div class="flak nopadding" id="'+flakId+'"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b><span>'+flakNr+'</span></b><p>'+ chosenObjNr +'</p></div><div class="flakSideDown nopadding"></div></div><br>');

//Delete flak
$('#deleteFlak').on('click', function(){
    $(this).closest('.flak').remove();
});

Answer 1

You need to use $.fn.next() ,as it looks from immediately following sibling. the $.fn.closest() method traverses up through its ancestors in the DOM tree including itself.

Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Use

//Delete flak
$('#deleteFlak').on('click', function(){
    $(this).next('.flak').remove();
});

Answer 2

Try the FIDDLE .

Following code finds the class flak under the parent DIV of span #deleteFlak .

Javascript code :

$(function(){
    $('#deleteFlak').on('click', function(){
        alert('close');
        $(this).closest('div').find('.flak').remove();
    });
});

Hpe this helps.