Jquery: удаление динамически генерируемого элемента при нажатии кнопки модального подтверждения - PullRequest
Новая
       1

Jquery: удаление динамически генерируемого элемента при нажатии кнопки модального подтверждения

0 голосов
/ 19 марта 2020

Например: 

<body>

    <div class="container">
      <!-- Generated by ajax -->
      <div class="item" id="item_1">
        <span class="remove-item"></span>
      </div>
      <div class="item" id="item_2">
        <span class="remove-item"></span>
      </div>
    </div>


    <div class="modal" id="removeItemModal">
        <h3>Are you sure you want to remove?</h3>
        <input type="hidden" id= "removeItemIdModalInput">
        <button type="button">Cancel</button>
        <button type="button" id="remove-confirm-btn">Confirm</button>
     </div>

</body>

При щелчке по классу remove-item будет отображаться модальное изображение с двумя кнопками Confirm и Cancel, когда пользователь нажимает на подтверждение, удаляя целое (родительское) вещь. Как я могу достичь этого ?? Вот что я сделал: 

$(document).on("click",".remove-item", function (e) {

        var removeProductId = $(this).closest(".item").attr("id");

        // Setting the value in modal's hidden input
        $("#removeItemIdModalInput").val(removeProductId);

        $("removeItemModal").modal('toggle');

    });

$(document).on("click","#remove-confirm-btn", function (e) {

        var removeProductId = $("#removeItemIdModalInput").val();

        $("removeItemModal").modal('toggle');

        // Removing the container div/item
        $(removeProductId).fadeOut(300,function () { $(this).remove();});


    });

Но это не работает. Почему? Есть ли лучший подход?

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Вот что решило мою проблему: 

$(document).on("click","#remove-confirm-btn", function (e) {

        var removeProductId = $("#removeItemIdModalInput").val();

        $("removeItemModal").modal('toggle');

        // Changed here
        $("body").find(removeProductId).fadeOut(300,function () { $(this).remove();});


    });
0 голосов
/ 19 марта 2020

[EDIT]
TS хочет модальное окно, этот ответ предоставляет альтернативу

Вместо модального окна вы также можете использовать confirm().

Если это подтверждается, вы выбираете родителя диапазона, используя parent(), затемняете этот элемент, и удалить. Как у вас уже было.

Также обратите внимание, что вы используете remove-item и remove_item оба, я изменил все на remove_item

$(document).on("click", ".remove_item", function(e) {
  if(confirm("Do you want to remove this box")) {
    $(this).parent().fadeOut(300, function () { $(this).remove();});
  }
  return;
});
#item_1, #item_2 {
  border: 1px solid black;
  margin: 2em;
}

.remove_item {
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <!-- Generated by ajax -->
  <div id="item_1">
  Item 1
    <span class="remove_item">remove</span>
  </div>
  <div id="item_2">
  Item 2
    <span class="remove_item">remove</span>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...