Удаление определенного элемента из множества элементов с одинаковым классом

[Artem_A]

Здравствуйте не могу решить проблему, удаляется предыдущий блок
НЕ могу провести зависимость $(this).remove(), чтобы он только сам себя удалял

<table class="table table-bordered">
          <caption>РАСЧЕТ ПЛАТЕЖЕЙ</caption>
          <thead>
            <tr>
              <th>№</th>
              <th>Дата</th>
              <th>Сумма переплат</th>
              <th>Остаток задолжности</th>
              <th>Основной долг</th>
              <th>Начисленные проценты</th>
              <th>Платеж</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <th>05.16</th>
              <th>30 000</th>
              <th>3 500 500</th>
              <th>10 000</th>
              <th>30 000</th>
              <th>40 000</th>
              <th><div class="change-block"></div></th>
            </tr>
            <tr>
              <th>2</th>
              <th>05.16</th>
              <th>30 000</th>
              <th>3 500 500</th>
              <th>10 000</th>
              <th>30 000</th>
              <th>40 000</th>
              <th><div class="change-block"</div></th>
            </tr>
            <tr>
              <th>3</th>
              <th>05.16</th>
              <th>30 000</th>
              <th>3 500 500</th>
              <th>10 000</th>
              <th>30 000</th>
              <th>40 000</th>
              <th><div class="change-block"></div></th>
            </tr>
            <tr>
              <th>4</th>
              <th>05.16</th>
              <th>30 000</th>
              <th>3 500 500</th>
              <th>10 000</th>
              <th>30 000</th>
              <th>40 000</th>
              <th>
                <div class="change-block">

                </div>
             </th>
            </tr>
          </tbody>
        </table>

<script>
var $add_button = $('<button type="button" name="button" class=" add-button" >Добавить платеж</button>');
var $confirmed_pay = $('<div class="confirmed-pay"> <a href="#"><span class="icons close-icon"></span></a><p class="blue-text">10 000</p><p>Экономия 25 000</p></div>');
$( ".change-block" ).append($add_button);


$('.change-block > .add-button').click(function(){
  $(this).parent().append($confirmed_pay);
  $(this).remove()
});
</script>

[рони]

Artem_A,

$(this).parent().append($confirmed_pay.clone());

[Artem_A]

Спасибо большущее!! А почему он так себя ведет?

[рони]

Artem_A,
потому что один и тот же элемент таскали из блока в блок

[Artem_A]

А как сделать чтобы кнопка обратно возвращалась?

$('.change-block > .add-button').click(function(event){
      var parent = $('.change-block').children().is('.add-button')
      if (parent == true) {
      $(this).parent().append($confirmed_pay.clone());
      $(this).remove()
    } else {
      $(this).parent().append($add_button.clone());
      $(this).remove();
    }

[рони]

А как сделать чтобы кнопка обратно возвращалась?

опишите словами, что хотите сделать

[Artem_A]

Я хочу чтобы после нажатия на <span class="close-pay"></span>который находится в $confirmed_pay - опять возвращалась кнопка которая была удалена.

var $add_button = $('<button type="button" name="button" class=" add-button" >Добавить платеж</button>');

var $confirmed_pay = $('<div class="confirmed-pay"> <span class="icons close-icon close-pay"></span><p class="blue-text">10 000</p><p>Экономия 25 000</p></div>');

$( ".change-block" ).append($add_button);


$('.change-block > .add-button').click(function(event){
      var parent = $('.change-block').children().is('.add-button')
      if (parent == true) {
      $(this).parent().append($confirmed_pay.clone());
      $(this).remove()
    } else {
      $(this).parent().append($add_button.clone());
      $(this).remove();
    }

[рони]

Artem_A,

$(function() {
    function create(button) {
        var $add_button = $('<button type="button" name="button" class=" add-button" >Добавить платеж</button>');
        var $confirmed_pay = $('<div class="confirmed-pay"> <a href="#"><span class="icons close-icon close-pay"></span></a><p class="blue-text">10 000</p><p>Экономия 25 000</p></div>');
        return button ? $add_button : $confirmed_pay
    }
    $(".change-block").append(create(true)).on("click",
        ".add-button, .close-pay",
        function(event) {
            var button = $(this).is(".close-pay");
            var elem = create(button);
            $(event.delegateTarget).html(elem)
        })
});

[Artem_A]

ДА! все работает