javascript - 按 ID 删除一行中的特定 DIV

Question

我正在使用 Django，我的页面上有几个 Bootstrap 卡片，如下图所示，我试图在点击时删除一个 div(我的 <a> 上的 X)

<row>
  <col-sm-3 id="{{ topic.pk }}">
    <card>
      <...><a href="" class="remove" data-id="{{ topic.pk }}">X</a></> #ID here is 1
    </>
  </>
  <col-sm-3 id="{{ topic.pk }}">
    <card>
      <...><a href="" class="remove" data-id="{{ topic.pk }}">X</a></> #ID here is 2
    </>
  </>
</>

$(function(){
  $('a.remove').on('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var id = $this.data('id');
    $.get('/messages/delete/'+id, {}, function(response) {
      $this.parent().fadeOut(300, function(){
        $(this).remove();
      });
    });
  });
});

点击不起作用。调试代码:

127.0.0.1:8000/messages/delete/1 404 NOT FOUND

我明白，“a”与我的职能有关。不明白的是什么目的

$.get('/messages/delete/'+id, {}, function(response)?

我只想删除 Card-Div。 我怎样才能更改我的代码以使其工作？任何意见表示赞赏。

Answer 1

扩展我的评论。

这部分:

$.get('/messages/delete/'+id, {}, function(response) { ... });

是一个 AJAX 调用(它也使用 GET HTTP 方法 - 它应该使用 POST 或 DELETE)，它向指定的路由发送请求。人们可能会猜测它连接到一个删除方法，从数据库中删除具有指定 ID 的行。

你的错误出现了，因为你没有设置那条路线。

这部分:

$this.parent().fadeOut(300, function(){$(this).remove()

是实际从页面中删除 HTML 元素的元素。在您当前的代码中，它是在 AJAX 请求的回调函数中调用的(永远不会成功)，因此它永远不会触发。

如果您只想从 html 中删除卡片元素，您应该使用:

$(function(){
  $('a.remove').on('click', function(e) {
    e.preventDefault();
    $(this).closest('card').remove();
  });
});

如果你真的想从你的数据库中的表中删除一行，这需要你在后端设置一个路由和一个方法(在你的例子中是 Django)，然后在成功请求后在前端删除它。