title: How to remove parent row and its items in array : jquery
body: <p><strong>Summary:</strong></p>
  
  <p>I am creating a web page which shows results of user selections. First user select items from the given panel and clicks on add button. This creates a table row of selected items of the user(Just like adding items to the cart). User can remove items in the list when remove button is clicked. i am using parents('tr').remove()</p>
  
  <p><strong>Issue:</strong></p>
  
  <p>When the user clicks remove button, the row is getting deleted but the selection items a still in my array "benefits_array".</p>
  
  <p>Here is jquery code:</p>
  
  <pre><code>.on('click','.add-benefits-items', function(e) {
  
      var target = $(this).siblings('.panel-body');
  
      var tree_benefits_text = target.find('#tree-dropdown option:selected').text();
      var display_text = target.find('#benefits-display-dropdown option:selected').text();
      var unit_text = target.find('benefitsunit.active').text();
      var dataset_text = target.find('benefitsDataset.active').text();
      var checkboxes = target.find('input[type="checkbox"]');
  
      benefits_array.push(
      {
          Tree_Benefits : tree_benefits_text,
          Display : display_text,
          Unit : unit_text,
          Dataset: dataset_text,
  
      });
  
      $('.table-benefits').find('tbody')
          .each(function(){
              var map_elements = '&lt;td style = "text-align:center"&gt;';
              if (display_text == 'Map') {
                  map_elements += '&lt;button data-target="#map_btn_benefits_id" type="button" class="map_btn_benefits btn btn-info active" data-toggle="modal"&gt;Map&lt;/button&gt;';
                  map_elements += '&lt;div id="map_btn_benefits_id" class="modal fade" role="dialog"&gt;';
                  map_elements += '&lt;div class="modal-dialog"&gt;&lt;div class="modal-content"&gt;&lt;div class="modal-header"&gt;&lt;h4 class="modal-title"&gt;Landscape Map&lt;/h4&gt;&lt;/div&gt;';
                  map_elements += '&lt;div class="modal-body"&gt;&lt;div id="map_id_benefits" style="width: 500px; height: 380px; margin: 0; padding: 0;"&gt;&lt;/div&gt;&lt;/div&gt;';
                  map_elements += '&lt;div class="modal-footer"&gt;&lt;button type="button" class="save-exit-benefits btn btn-primary" data-dismiss="modal"&gt;Save changes and Close&lt;/button&gt;';
                  map_elements += '&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;';
                  map_elements += '&lt;/td&gt;';
  
              }   
              else {
                  map_elements += display_text+'&lt;/td&gt;';               
              }
  
  
          $(this).append(
          '&lt;tr&gt;'+
          '&lt;td style="text-align:center"&gt;&lt;a class="remove-row-benefits text-danger"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;'+
          '&lt;td style="text-align:center"&gt;'+tree_benefits_text+'&lt;/td&gt;'+
          map_elements+
          '&lt;td style="text-align:center"&gt;'+unit_text+'&lt;/td&gt;'+
          '&lt;td style="text-align:center"&gt;'+dataset_text+'&lt;/td&gt;'+
          '&lt;/tr&gt;')
  
  
       });
  
  })
  
  .on('click', '.remove-row-benefits', function(){
      $(this)
          .parents('tr').remove();
  })
  </code></pre>
  
  <p>I am passing "benefits_array" to other template using django views.py. For this question i believe you do not need code for it. What is the logic i am missing here. </p>