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

• • Reply
  hocamahdi99

  Member

  8 Points

  85 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

  Participant

  1320 Points

  491 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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  AddWeb Solut...

  Participant

  850 Points

  492 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