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. 在提出刪除訂單項目的請求后，在數據庫中刪除它就足夠了。

畢竟這些你會得到你想要的，因為在從數據庫接收訂單時你沒有得到被刪除的項目。

由於您的代碼對我來說還不夠，我沒有回答編碼示例。