remove selected and all previous row in tables with javascript in asp mvcRSS

• • Reply
  hocamahdi99

  Member

  6 Points

  68 Posts

  remove selected and all previous row in tables with javascript in asp mvc

  Nov 24, 2019 09:51 PM|hocamahdi99|LINK

  <div class="votecell post-layout--left"> <div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="59022763"> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">

  I can remove one row selected using below js code

  <td><a href="#" class="removeLink">Remove</a></td>
  <script type="text/javascript">
  
                  $("a.removeLink").on("click", function () {
                      var trow = $(this).closest("tr");
                      trow.remove();
                  });
  </script>

  that's only delete one table row, i want to delete selected and all previous row

  id branch amount

  0 aaa 500

  1 bbb 200

  2 ccc 300 --remove selected row

  4 ddd 400

  5 eee 400

  6 fff 400

  when i click on third row it will remove previous row so the result will be something like this

  id branch amount

  4 ddd 400

  5 eee 400

  6 fff 400

  </div> </div> </div>
• • Reply
  jiadongm

  Member

  440 Points

  163 Posts

  Re: remove selected and all previous row in tables with javascript in asp mvc

  Nov 25, 2019 03:15 AM|jiadongm|LINK

  Hi hocamahdi99,

  You can get all the rows under the table first, then delete all the previous rows according to the index value of the selected row. Testing with the following codes:

  <table>
      <thead>
          <tr>
              <th>id</th>
              <th>branch</th>
              <th>amount</th>
              <th>option</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>0</td>
              <td>aaa</td>
              <td>500</td>
              <td><a href="#" class="removeLink">Remove</a></td>
          </tr>
          <tr>
              <td>1</td>
              <td>bbb</td>
              <td>200</td>
              <td><a href="#" class="removeLink">Remove</a></td>
          </tr>
          <tr>
              <td>2</td>
              <td>ccc</td>
              <td>300</td>
              <td><a href="#" class="removeLink">Remove</a></td>
          </tr>
          <tr>
              <td>4</td>
              <td>ddd</td>
              <td>400</td>
              <td><a href="#" class="removeLink">Remove</a></td>
          </tr>
          <tr>
              <td>5</td>
              <td>eee</td>
              <td>400</td>
              <td><a href="#" class="removeLink">Remove</a></td>
          </tr>
          <tr>
              <td>6</td>
              <td>fff</td>
              <td>400</td>
              <td><a href="#" class="removeLink">Remove</a></td>
          </tr>
      </tbody>
  </table>

  $("a.removeLink").on("click", function () {
              var trList = $(this).closest("table tbody").find("tr");
              var trindex = $(this).closest("tr").index();
              for (var i = 0; i <= trindex; i++) {
                  trList[i].remove(); 
              }
          });

  Result:

  

  Best Regards,

  Jiadong Meng

  MSDN Community Support
  
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com
• • Reply
  AddWeb Solut...

  Participant

  790 Points

  471 Posts

  Re: remove selected and all previous row in tables with javascript in asp mvc

  Nov 25, 2019 12:34 PM|AddWeb Solution|LINK

  Hello hocamahdi99,

  Checked the issue and you have to set the 2 methods of jquery for the select previous all the elements that you want to delete.

  The syntax for the same is describe below.

  $("a.removeLink").on("click", function () {
          var trow = $(this).closest("tr").prevAll().next();
          trow.remove();
  });

  You have to just add .prevAll().next() in your call.

  You will get the result as your expectation.

  If you want still any help please let us know.

  Thanks.

  Ashish Jain