尝试使用按钮删除第一个附加的div也会删除jquery

Question

请考虑在主div中有2个附加的div。当我尝试使用撤销按钮删除第一个附加的div时，它首先删除了第二个附加的div。然后，如果再次单击第一个div上的撤消按钮，它将删除第一个div。

当主div中有两个附加的div时，我需要在单击“撤消”按钮时删除第一个div。

$(document).ready(function() {
  var str = '';
  $("#session_button").click(function() {
    $.ajax({
      url: "/active_session",
      type: "GET",
      dataType: "json",
      success: function(data) {

        $(data).each(function(index, value) {
          str = ' ';
          str +=
            ("browser:" + " " + value.browser + "<br>" +
              "IP: " + " " + value.ip_address + "<br>" +
              "sign_in_time: " + " " + value.sign_in_time + "<br><br>");

          console.log(str);
          console.log(value.id)

          my_button = $('<button/>', {
            text: "revoke",
            id: 'btn_' + index,
            onclick: "post_fun('" + value.id + "', 'div" + index + "')"

          });
          my_div = $('<div id="div' + index + '" />');
          console.log(my_div);
          my_div.append(str);
          my_div.append(my_button)
          $('#display_session').append(my_div);
        });
      }
    });
  });
});

function post_fun(id_parameter, my_div) {
  console.log(id_parameter)
  $.ajax({
    type: "POST",
    url: "/revoke",
    data: JSON.stringify({
      id_param: id_parameter
    }),
    contentType: 'application/json;charset=UTF-8',
    success: function() {
      console.log(my_div);
      $("#" + my_div).remove();
    }
  });
}

<div class="row">
  <div class="column left" style="background-color:#aaa;">
    <div>
      <form name="twitt_form" action={{url_for( "posting_messsage", email=email)}} method="POST">
        <b style="font-size:124%" ;>TITLE</b>
        <hr>
        <br>
        <div class="dropdown" style="float:right;">
          <button class="dropbtn">Security</button>
          <div class="dropdown-content">
            <!--<a href="#" onclick="load_session()">Sessions</a>-->
            <a href="#" id="session_button">Sessions</a>
          </div>
        </div>
        <textarea rows="1" cols="20" name="your_title" id='your_title' value="" required></textarea> <br><br>
        <b style="font-size:124%" ;>WRITE YOUR POST</b>
        <hr>
        <br>
        <textarea name="title" id='title' value="" required></textarea> <br><br>
        <br>
        <button type="submit" class="button"><b style="font-size:124%" ;>POST</b></button>
      </form>
      <br><br><br><br>
    </div>
    <div id="lower_part">
      <b style="font-size:124%" ;>RECENTPOST</b> <br>
      <hr>
      <br> {% for post in retrieved_post: %}
      <ul><b>Title and Post</b>
        <li>{{post.Title}}</li>
        <li>{{post.MyPost}}</li>
      </ul>
      {% endfor %}
      <br><br>
      <button class="delete_button"><b style="font-size:124%" ;>Delete</b></button>
      <form action={{url_for( "logout")}} method="post">
        <input type="submit" name="logout" class="logout_button" id="logout" value="Logout"> <b style="font-size:124%" ;></b> </input>
      </form>
    </div>

  </div>
  <div class="column right" id="display_session" style="background-color:#bbb;">
  </div>
</div>

Answer 1

与其对按钮中的ID进行硬编码，不如使用委托人和使用选择器进行导航-像

$('#display_session').on("click",".deleteButton",function(e) { 
  e.preventDefault(); 
  post_fun(this);
});

使用

my_button = $('<button/>', {
  text: "revoke",
  data - id: value.id
}).addClass("deleteButton")

function post_fun(but) {
  var $but = $(but);
  $.ajax({
    type: "POST",
    url: "/revoke",
    data: JSON.stringify({
      id_param: $but.attr("data-id")
    }),
    contentType: 'application/json;charset=UTF-8',
    success: function() {
      console.log(my_div);
      $but.closest("div").remove();
    }
  });
}