Question

我正在使用Django，并且在我的页面上有几张Bootstrap卡，如下面的结构所示，并且我试图在点击时删除一个div（我的{{1}上的X）

<a>

<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
    </>
  </>
</>

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

未找到127.0.0.1:8000/messages/delete/1 404

我知道，“ a”与我的功能有关。我不明白的是

的目的是什么

$(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();
      });
    });
  });
});

我只希望删除Card-Div。如何更改代码以使其正常工作？任何输入表示赞赏。

Answer 1

发表我的评论。

此部分：

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

是AJAX调用（它也使用GET HTTP方法-应该使用POST或DELETE）将请求发送到指定的路由。可以猜测它与delete方法相连，以便从数据库中删除具有指定ID的行。

出现错误，因为您没有设置该路由。

此部分：

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

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

如果您只想从html中删除card元素，则应使用：

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

如果您实际上要从数据库的表中删除一行，这将需要您在后端（以Django为例）中设置路由和方法，然后在成功请求后在前端中将其删除。

按ID删除一行中的特定DIV

1 个答案: