CODEWITHSUNDEEP
javascriptjqueryhtml
Eric Kim
Eric Kim

Reputation: 2696

jQuery - find the index of itself inside a div

HTML

<form class="data-table">
  <div class="row">...</div>
  <div class="row">...</div>
  <div class="row>
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">
      <div class="has-box">
        <input ...>
        <button> ...</button>
        <div class="modal">...</div>
        <ul class="panel_toolbox">
          <li>
            <a class="close-link">
              <i class="fa fa-close"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</form>

Inside <form>, there are multiple <div class="row">. Except for the first row, all the other rows have <i class="fa fa-close"> inside themselves. The purpose of my code is to allow users to remove a row by clicking 'x' icon. But in order to do that, I first need to know which row the user clicked.

JavaScript

$('.close-link').click(function () {
    // if statement makes sure that the user doesn't remove the first row
    if ($('form.data-table').children().length > 2) {
        var $ROW = $(this).closest('.row');
        $ROW.remove();
    }
});

The above Javascript code works only for the second row, and from the third row, the remove icon won't work (first row is never to be removed, because it's a title row).

Here's how it looks like.

enter image description here

How can I edit my jQuery code so that I can detect which row the user clicked, and remove only that row?

++ Additional information There is an "Add" button at the bottom, and new rows are added when I click the button. So, initially there are only two rows, title row and the input row. If I click add button, a new input row is added, and click is not recognized on the newly-added rows

enter image description here

Upvotes: 1

Views: 111

Answers (2)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this: You can use closest() function to find the parent div and then remove it. Use index to find the position of row so that first row will not be removed. Please check below code.

$(document).ready(function() {
    $(document).on("click", ".close-link", function() {
        var parent = $(this).closest(".row");
        var index = parent.index();
        if (index > 0) {
            parent.remove();
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form class="data-table">
  <div class="row">...</div>
  <div class="row">...</div>
  <div class="row">
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">...</div>
    <div class="col-lg-3">
      <div class="has-box">
        <input value="This is value">
        <button>Button</button>
        <div class="modal"></div>
        <ul class="panel_toolbox">
          <li>
            <a class="close-link">Close
              <i class="fa fa-close"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</form>

Upvotes: 2

John R
John R

Reputation: 2791

  1. Use closest('div.row').
  2. Also change the length to 1

Example: 

$('.close-link').click(function() {
  // if statement makes sure that the user doesn't remove the first row
  if ($('form.data-table').children().length > 1) {
    var $ROW = $(this).closest('div.row');
    $ROW.remove();
  }
});

Update:(As per question update)

Use the following type click event for dynamically added rows also to work.

$("form.data-table").on("click", ".close-link", function() {
  // if statement makes sure that the user doesn't remove the first row
  if ($('form.data-table').children().length > 1) {
    var $ROW = $(this).closest('div.row');
    $ROW.remove();
  }
});

Upvotes: 1

Related Questions