CODEWITHSUNDEEP
jquery
Björn C
Björn C

Reputation: 4008

Remove element from DOM with Jquery

I have some static div´s and some div´s added by jquery.
I need a "remove element" button.
I use Jquery to remove elements from the DOM.
My problem is that i can only remove the static elements, not the "later on added by jquery".

How can i solve this?
FIDDLE: http://jsfiddle.net/7hqu377v/3/

HTML

<div class="col-md-1">
  <button class="btn btn-success" id="btnAddFlak">+ Flak</button>
</div>
<div class="well" id="flakDiv"> <span class="deleteFlak pull-right">x</span>
  <div class="flak nopadding">
    <div class="flakSideUp nopadding"></div>
    <div class="flakMiddle">Flak <b><span>1</span></b>
    </div>
    <div class="flakSideDown nopadding"></div>
  </div>
</div>

JS

var flakNr = 1;
//Create flak
$('#btnAddFlak').on('click', function () {

    //Set flakNr
    flakNr = $('.flakMiddle').last().find("span").text();
    if (isNaN(flakNr)) flakNr = 1;


    //Increase flakNr
    flakNr++;

    //Flak HTML setup
    var flak = $('<span class="deleteFlak pull-right">x</span><div class="flak nopadding"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b><span>' + flakNr + '</span></b></div><div class="flakSideDown nopadding"></div></div><br>');

    //Insert flak to flakDiv
    $('#flakDiv').append(flak);
  });

  //Delete flak
  $('.deleteFlak').on('click', function () {

  //Remove flak from DOM
  $(this).next('.flak').remove();
  $(this).remove();

}); //END Delete flak

Upvotes: 2

Views: 522

Answers (3)

Bryan
Bryan

Reputation: 84

Whenever you need to access elements that are added later through javascript, access them through $(document), like so : 

$(document).on('click', '.deleteFlak', function () {
//Remove flak from DOM
  $(this).next('.flak').remove();
  $(this).remove();

}); //END Delete flak

Upvotes: 2

Victor
Victor

Reputation: 8480

After you create the element you should bind the event.

I copy you code and after the creation of the new elements I rebind the click envents.

var flakNr = 1;
//Create flak
$('#btnAddFlak').on('click', function () {

    //Set flakNr
    flakNr = $('.flakMiddle').last().find("span").text();
    if (isNaN(flakNr)) flakNr = 1;


    //Increase flakNr
    flakNr++;

    //Flak HTML setup
    var flak = $('<span class="deleteFlak pull-right">x</span><div class="flak nopadding"><div class="flakSideUp nopadding"></div><div class="flakMiddle">Flak <b><span>' + flakNr + '</span></b></div><div class="flakSideDown nopadding"></div></div><br>');

    //Insert flak to flakDiv
    $('#flakDiv').append(flak);

   // here you should remove the older 'click' events. And create new events for ALL. Because the events are only attached to the oldest elements
    $('.deleteFlak').unbind('click').click(function () {
          //Remove flak from DOM
          $(this).next('.flak').remove();
          $(this).remove();
    }); //END Delete flak
});

  //Delete flak
$('.deleteFlak').click(function () {
      //Remove flak from DOM
      $(this).next('.flak').remove();
      $(this).remove();
}); //END Delete flak

Upvotes: 0

rrk
rrk

Reputation: 15846

The problem was with event delegation of dynamically added objects.

DEMO

//Delete flak
$(document).on('click', '.deleteFlak', function () {

    //Remove flak from DOM
    $(this).next('.flak').remove();
    $(this).remove();

}); //END Delete flak

Upvotes: 4

Related Questions