OnClick delete 彻底删除特定DIV

Question

Im having a hard time coming up with a function which makes the delete onclick remove everything within the entire div box and remains deleted when the page is refreshed.
I have attached a picture at the bottom of the code so you can get a better sense of what I am trying to do.
I am a beginner in java and php so if you could add small explanations with the steps it would be very much appreciated: :)
Thanks in advance for taking the time to help me.

<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

Here is a javascript generated page example.

When order deleted it tries send notificaton to 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

The question doesn't give much information on the system you have build.

Firstly, How are you showing this ordered list for a user?

Secondly, Is there anything related to a particular user?, if so are you using Database in backend to store the list of orders etc etc..?

Assuming you are using database for user to store his orders and all, do the following...

1. Store user ID in session storage after successful login.
2. Use this session user ID in whatever page you want to query accordingly (eg:- select * from blahblah where userid="$_SESSION['userid']"; )
3. Retrieve orders, profile etc anything using php and database.
4. Learn to mix-up html and php code and make a dynamic page with php and database query.
5. Use Ajax request to retrieve data from php, or use simple form handling (but page will be less dynamic and you need to refresh page)
6. After making request to delete an order item, delete it in database that would be enough.

After all these you will get what you want cuz while receiving orders from database you don't get the item which got deleted.

As your code was not sufficient for me I didn't answer with coding example.