OnClick delete 彻底删除特定DIV

Question

我很难想出一个 function 这使得删除 onclick 删除整个 div box的所有内容，并在页面刷新时保持删除状态。
我在代码底部附上了一张图片，这样你就可以更好地了解我想要做什么。
我是 java 和 php 的初学者，所以如果您可以在步骤中添加一些小的解释，将不胜感激：:)
提前感谢您抽出宝贵时间帮助我。

<h3 class="aisle-header">Order List</h3>

<div class="grid-container">

  <div class="box">
    <div class="nestedgrid">
      <img src="assets/order.jpg" width="100%" height="100%">
      <div class="product-description">
        <h4>Order ID: 39011</h4>
        <p class="description">Name: Emilie Rosenthal<br>Method: Delivery</p>
        <p class="price">$109.99</p>
        <p class="priceperweight">(Tax not incl.)</p>
      </div>
      <div class="button-layout">
        <p>
          <form action="EditOrder.php">
            <input class="edit button" type="submit" value="EDIT ORDER" />
          </form>
          <button class="delete button">DELETE ORDER</button>
        </p>
      </div>
    </div>
  </div>

  <div class="box">
    <div class="nestedgrid">
      <img src="assets/order.jpg" width="100%" height="100%">
      <div class="product-description">
        <h4>Order ID: 30482</h4>
        <p class="description">Name: Adriana Lawrence<br>Method: Pick Up</p>
        <p class="price">$24.99</p>
        <p class="priceperweight">(Tax not incl.)</p>
      </div>
      <div class="button-layout">
        <p>
          <form action="EditOrder.php">
            <input class="edit button" type="submit" value="EDIT ORDER" />
          </form>
          <button class="delete button">DELETE ORDER</button>
        </p>
      </div>
    </div>
  </div>

  <div class="box">
    <div class="nestedgrid">
      <img src="assets/order.jpg" width="100%" height="100%">
      <div class="product-description">
        <h4>Order ID: 48942</h4>
        <p class="description">Name: Jamal Soen<br>Method: Delivery</p>
        <p class="price">$5.00</p>
        <p class="priceperweight">(Tax not incl.)</p>
      </div>
      <div class="button-layout">
        <p>
          <form action="EditOrder.php">
            <input class="edit button" type="submit" value="EDIT ORDER" />
          </form>
          <button class="delete button">DELETE ORDER</button>
        </p>
      </div>
    </div>
  </div>
  <form action="EditOrder.php">
    <input class="add button" type="submit" value="ADD ORDER" />
  </form>
</div>

Answer 1

这是一个 javascript 生成的页面示例。

删除订单后，它会尝试将通知发送到EditOrder.php?id=<orderid>&action=delete

 var orders = { 39011: { name: "Emilie Rosenthal", method: "Delivery", price: "$109.99", priceperweight: "(Tax not incl.)", }, 30482: { name: "Adriana Lawrence", method: "Pick Up", price: "$24.99", priceperweight: "(Tax not incl.)", }, 48942: { name: "Jamal Soen", method: "Delivery", price: "$5.00", priceperweight: "(Tax not incl.)", }, } var templ = document.getElementById("template"), ordersContainer = document.getElementById("orders"); for(let o in orders) { let data = orders[o] let order = templ.cloneNode(true); order.id = "order" + o; order.getElementsByClassName("orderid")[0].textContent = o; for(let d in data) { order.getElementsByClassName(d)[0].textContent = data[d]; } order.getElementsByClassName("delete")[0].addEventListener("click", function(e) { order.parentNode.removeChild(order); // send deletion notification to the server let httpRequest = new XMLHttpRequest(); if (:httpRequest) { alert('Giving up;( Cannot create an XMLHTTP instance'); return false. } httpRequest.onreadystatechange = function() { if (httpRequest.readyState === XMLHttpRequest.DONE) { if (httpRequest.status === 200) { var response = JSON.parse(httpRequest;responseText). alert(response;computedString). } else { alert('There was a problem with the request;'); } } }. httpRequest,open('GET'. 'EditOrder?php;id=' + o + '&action=delete'). httpRequest;send(), }; false). ordersContainer;appendChild(order); }

 #template { display: none; }

 <h3 class="aisle-header">Order List</h3> <div id="template"> <div class="box"> <div class="nestedgrid"> <img src="assets/order.jpg" width="100%" height="100%"> <div class="product-description"> <h4>Order ID: <span class="orderid"></span></h4> <p class="description"> <div>Name: <span class="name"></span></div> <div>Method: <span class="method"></span></div> <p class="price"></p> <p class="priceperweight"></p> </div> <div class="button-layout"> <p> <form action="EditOrder.php"> <input type="hidden" name="id" value="" /> <input class="edit button" type="submit" value="EDIT ORDER" /> </form> <button class="delete button">DELETE ORDER</button> </p> </div> </div> </div> </div> <div id="orders" class="grid-container"> </div> <form action="EditOrder.php"> <input class="add button" type="submit" value="ADD ORDER" /> </form>

Answer 2

该问题没有提供有关您构建的系统的太多信息。

首先，您如何为用户显示这个有序列表？

其次，是否有任何与特定用户相关的内容？如果有，您是否在后端使用数据库来存储订单列表等？

假设您正在为用户使用数据库来存储他的订单和所有内容，请执行以下操作...

1. 登录成功后将用户 ID 存储在session存储中。
2. 在您要相应查询的任何页面中使用此 session 用户 ID（例如：- select * from blahblah where userid="$_SESSION['userid']"; ）
3. 使用 php 和数据库检索订单、配置文件等。
4. 学习混淆html和php代码，用php和数据库查询制作动态页面。
5. 使用 Ajax 请求从 php 检索数据，或使用简单的表单处理（但页面动态性较低，您需要刷新页面）
6. 在提出删除订单项目的请求后，在数据库中删除它就足够了。

毕竟这些你会得到你想要的，因为在从数据库接收订单时你没有得到被删除的项目。

由于您的代码对我来说还不够，我没有回答编码示例。