时间戳

首页 > 解决方案 > 按 ID 删除一行中的特定 DIV

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

问题描述

我正在使用 Django，并且我的页面上有几个引导卡，如下面的结构，我试图在点击时删除一个 div（我的 X 上的 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
    </>
  </>
</>

$(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 未找到

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

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

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

标签： javascriptjqueryhtml

解决方案

扩展我的评论。

这部分：

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

是一个向指定路由发送请求的 AJAX 调用（也使用 GET HTTP 方法 - 它应该使用 POST 或 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）设置路由和方法，然后在成功请求后在前端将其删除。

推荐阅读