如何刪除項目表格清單？

Question

我有一個html代碼來添加一些訂單，客戶要從combobox選擇項目並在textbox其金額，然后單擊“ add按鈕，然后他可以選擇另一個項目，然后寫入其金額，依此類推，我需要添加每次單擊按鈕並在旁邊添加remove按鈕后的order details ，以便用戶根據需要將其從訂單中刪除，如何完成？

<div>
    <label class="arrow-right"> Category Name:</label>
</div>
<div>                           
    <select class="SelectStyle" style="width:95%;margin-left:4px;border:0;" name="CategoryName" id="CategoryName" onchange="GetCatType(this.options[this.selectedIndex].innerHTML)">
        <option value="">Select Category Name</option>
            <!--populate value using php-->
            <?php
             $stmt ="SELECT distinct Category_Name FROM Categories";
             foreach ($conn->query($stmt) as $row) {
            ?>
                <option value="<?php echo $row['ID'];?>"><?php echo $row['Category_Name'];?></option>
            <?php
            }
            ?>
    </select>
</div>
<div>
    <label class="arrow-right"> Category Type:</label>
</div>
<div>
    <select class="SelectStyle" style="width:95%;margin-left:4px;border:0;" name="CategoryType" id="CategoryType" >
    <option value="">Select Category Type</option>
    </select>
</div>
<div>
    <label> &nbsp;&nbsp;Amount:</label>
    <input type="text" id="Amounttxt" style="background-color:white;color:rgb(16,29,73);font-weight:bold;padding-left:5px;width:90px;height:28px;" name="Amounttxt"> &nbsp;<label>Kg</label>
    <button id="Add" type="button" class="btn btn-success" style="margin-left: 5px;" onclick="AddAmount()">Add</button>
</div>
<div>
    <label class="arrow-right"> Order Details:</label><br>
    <ul id="OrderDetails"></ul>
</div>
<div class="col-sm-6 col-sm-offset-3">
      <div>
        <button id="AddOrder" type="button" class="btn btn-success" style="margin-bottom:5px;" onclick="AddNewOrder()">Add Order</button><br>
      </div>
</div>

JavaScript代碼：

 function AddAmount()
  {
  var sel = document.getElementById('CategoryName');
  var CatName = sel.options[sel.selectedIndex].text;
  var select = document.getElementById('CategoryType');
  var CatType = select.options[select.selectedIndex].text;
  var catSel = select.options[select.selectedIndex].value;
  var AmountTxt = document.getElementById('Amounttxt').value;

   if(catSel!='' && AmountTxt!='')
    {
          var OrderDetails=document.getElementById('OrderDetails');
          var existingItems = OrderDetails.childNodes;

            if(existingItems.length>0){
                for(i=0; i < existingItems.length; i++){
                        if(existingItems[i].getAttribute('cattype')==CatType){
                            alert('Item already Added');
                            return false;
                        }
                    }
                }
        var current=document.getElementById('OrderDetails').innerHTML;
        var new_item='<li class="OrderDetails" catname=' + CatName + ' cattype='+CatType +' amountTxt='+AmountTxt+'>'+ CatName + " " +CatType + " : " + AmountTxt + ' Kg <i class="glyphicon glyphicon-remove" onclick="removeit(this)"></i></li>';
        alert(new_item);
        document.getElementById('OrderDetails').innerHTML=current+new_item;
        document.getElementById('Amounttxt').value="";
   }

   else{
   alert('values are incomplete');
   }

}

Answer 1

創建一個js數組，在其中存儲要在OrderDetails中顯示的不同行。 每次更改時，您都可以根據數組中的值“重繪”該字段的內容。 因此，當一個項目被刪除時，將其從數組中刪除，並調用重新繪制您要在其中顯示標簽/字段的intterHTML的功能。

但是，我必須說，這確實感覺很奇怪。 我不知道您到底想做什么，但是也許環顧四周，看看其他系統/站點/工具如何處理這類用例。

Answer 2

 function AddAmount() { var select = document.getElementById('CategoryType'); var CatType = select.options[select.selectedIndex].text; var catSel = select.options[select.selectedIndex].value; var AmountTxt = document.getElementById('Amounttxt').value; if(catSel!='' && AmountTxt!=''){ var OrderDetails=document.getElementById('OrderDetails') var existingItems = OrderDetails.childNodes; if(existingItems.length>0){ for(i=0; i < existingItems.length; i++){ if(existingItems[i].getAttribute('cattype')==CatType){ alert('Item already Added') return false } } } var current=document.getElementById('OrderDetails').innerHTML var new_item='<p cattype='+CatType +' amountTxt='+AmountTxt+'>'+CatType + " : " + AmountTxt + ' Kg <i class="glyphicon glyphicon-remove" onclick="removeit(this)"></i></p>'; document.getElementById('OrderDetails').innerHTML=current+new_item; document.getElementById('CategoryType').value=""; document.getElementById('Amounttxt').value=""; } else{ alert('values are incomplete'); } } function removeit(obj){ var answer= confirm("Do you want to remove") if(answer){ obj.parentNode.remove() } } function showSummary(){ var OrderDetails=document.getElementById('OrderDetails') var existingItems = OrderDetails.childNodes; if(existingItems.length>0){ for(i=0; i < existingItems.length; i++){ alert("Selected Item is "+existingItems[i].getAttribute('cattype') +" with quantity "+ existingItems[i].getAttribute('amountTxt')+" kg") } } else{ alert("no Item Added") } } 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row"> <div class="col-sm-5"> <div> <label class="arrow-right"> Category Type:</label> </div> <div> <select class="SelectStyle" style="width:200px;margin-left:4px;border:0;" name="CategoryType" id="CategoryType" > <option value="">Select Category Type</option> <option value="1">One</option> <option value="2">Two</option> </select> </div> </div> <div class="col-sm-4"> <div><label> &nbsp;&nbsp;Amount:</label></div> <div> <input type="text" id="Amounttxt" style="background-color:white;color:rgb(16,29,73);font-weight:bold;padding-left:5px;width:80px;height:28px;" name="Amounttxt"> &nbsp;<label>Kg</label> </div> </div> <div class="col-sm-3"> <div><br></div> <div> <button id="Add" type="button" class="btn btn-success" onclick="AddAmount()">Add</button> </div> </div> </div> <div class="row"> <div class="col-sm-12"> <label class="arrow-right"> Order Details:</label><br> <label id="OrderDetails"></label> <button onclick="showSummary()"> Show Summary</button> </div> </div>