CODEWITHSUNDEEP
javascriptjquery
Jaylen
Jaylen

Reputation: 40311

How to delete a column using jquery by clicking on a cell?

I have a table that I add columns to it on the fly. Each column has an [X] icon on the top, when a user clicks on it, I need to delete the entire column.

I created a Fiddler page to show you what I have done.

As you can see I have [X] icon on the top and when I click it, it is deleting the 3rd column in the table because I am specifying a fixed column i.e. 3. But I need to be able to remove the current column not the 3rd column.

How can I determine what is the current column and delete every tr with in the table matching the correct position?

Upvotes: 0

Views: 1489

Answers (5)

Twisty
Twisty

Reputation: 30893

Adding mine in with the lot of answers:

Working Example:

http://jsfiddle.net/Twisty/h0asbe6o/

jQuery

function removeColumn(n, o) {
  o = (o != "undefined") ? o : $("#testTable1");
  console.log("Removing Column '" + o.find("thead tr th:eq(" + n + ")").text() + "' (" + n + ") from " + o.attr("id"));
  o.find("tr").each(function(k, e) {
    $(e).find("th:eq(" + n + ")").empty().remove();
    $(e).find("td:eq(" + n + ")").empty().remove();
  });
  return true;
}

Also you'd want to fix a few creation issues:

$(document).ready(function() {
  $('.defaultTable').dragtable();

  $('#test1').click(function() {
    $("#testTable1 > thead > tr").append('<th>New Column</th>');

    $("#testTable1 > tbody > tr").each(function(key, el) {
      if (key == 0) {
        var rm = $("<span>", {
            class: "removeMe"
          })
          .html("[X]")
          .click(function() {
            removeColumn($(this).index());
            $(this).remove();
          });
        rm.appendTo(el);
      } else {
        $(el).append('<td>New cell in the column</td>');
      }
    });

    $('.defaultTable').removeData().dragtable();
  });

  $('.removeMe').on("click", function() {
    removeColumn($(this).index());
    $('.defaultTable').removeData().dragtable();
  });
});

This will create new columns properly and allow you to delete either static or dynamically created elements.

EDIT

If you felt like improving the UI, you could do something like this:

http://jsfiddle.net/Twisty/h0asbe6o/4/

HTML

<div class="sample">
  <button type="button" id="test1">Add column</button>
  <div class="demo">
    <h4>demo</h4>
    <div class="demo-content">
      <table class="defaultTable sar-table" id="testTable1">
        <thead>
          <tr>
            <th><span class="cTitle handle">TIME</span><span class="removeMe">[x]</span></th>
            <th><span class="cTitle handle">%user</span><span class="removeMe">[x]</span></th>
            <th><span class="cTitle handle">%nice</span><span class="removeMe">[x]</span></th>
            <th><span class="cTitle handle">%system</span><span class="removeMe">[x]</span></th>
            <th><span class="cTitle handle">%iowait</span><span class="removeMe">[x]</span></th>
            <th><span class="cTitle handle">%idle</span><span class="removeMe">[x]</span></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>12:10:01 AM</td>
            <td>28.86</td>
            <td>0.04</td>
            <td>1.65</td>
            <td>0.08</td>
            <td>69.36</td>
          </tr>
          <tr>
            <td>12:20:01 AM</td>
            <td>26.54</td>
            <td>0.00</td>
            <td>1.64</td>
            <td>0.08</td>
            <td>71.74</td>
          </tr>
          <tr>
            <td>12:30:01 AM</td>
            <td>29.73</td>
            <td>0.00</td>
            <td>1.66</td>
            <td>0.09</td>
            <td>68.52</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

CSS

.removeMe {
  font-size: .65em;
  float: right;
  cursor: pointer;
  margin-top: -0.5em;
  color: #aaa;
}

.removeMe:hover {
  color: #222;
}

jQuery

function removeColumn(n, o) {
  o = (o != "undefined") ? o : $("#testTable1");
  o.find("tr").each(function(k, e) {
    if (k == 0) {
      $(e).find("th").eq(n).hide("slow").remove();
    } else {
      $(e).find("td").eq(n).hide("slow").remove();;
    }
  });
  return true;
}

var dragOptions = {
  dragHandle: '.handle'
};

$(document).ready(function() {
  $('.defaultTable').dragtable(dragOptions);

  $('#test1').click(function() {
    var head = $("<th>").html("<span class='cTitle handle'>New Column</span>");
    var rm = $("<span>", {
        class: "removeMe"
      })
      .html("[X]")
      .click(function() {
        removeColumn($(this).parent().index());
        $(this).remove();
      });
    rm.appendTo(head);
    head.appendTo("#testTable1 > thead > tr");

    $("#testTable1 > tbody > tr").each(function(key, el) {
      $(el).append('<td>New Cell</td>');
    });

    $('.defaultTable').removeData().dragtable(dragOptions);
  });

  $('.removeMe').on("click", function() {
    removeColumn($(this).parent().index());
    $('.defaultTable').removeData().dragtable(dragOptions);
  });
});

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

You may use https://api.jquery.com/nth-child-selector/:

$('#testTable1').on('click', '.removeMe', function () {
   $(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
   $(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
});

Snippet:

$(document).ready(function () {

  $('.defaultTable').dragtable();

  $('#test1').click(function () {
    $("#testTable1 > thead > tr").each(function () {
      $(this).append('<th>New Column</th>');
    });

    $("#testTable1 > tbody > tr").each(function (i, e) {
      if (i == 0) {
        $(this).append('<td class="removeMe">[X]</td>');
      } else {
        $(this).append('<td>New cell in the column</td>');
      }
    });
    $('.defaultTable').removeData().dragtable();
  });

  $('#testTable1').on('click', '.removeMe', function () {
    $(".defaultTable thead tr th:nth-child(" + ($(this).index() + 1) + ")").remove();
    $(".defaultTable tbody tr td:nth-child(" + ($(this).index() + 1) + ")").remove();
  });

  $('.defaultTable').removeData().dragtable();
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://akottr.github.io/css/akottr.css" rel="stylesheet"/>
<link href="http://akottr.github.io/css/reset.css" rel="stylesheet"/>

<link rel="stylesheet" type="text/css" href="//rawgithub.com/akottr/dragtable/master/dragtable.css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//rawgithub.com/akottr/dragtable/master/jquery.dragtable.js"></script>

<!-- only for jquery.chili-2.2.js -->
<script src="//code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script type="text/javascript" src="//akottr.github.io/js/jquery.chili-2.2.js"></script>


<div class="sample">

    <button type="button" id="test1">Add column</button>

    <div class="demo">
        <h4>demo</h4>

        <div class="demo-content">
            <table class="defaultTable sar-table" id="testTable1">
                <thead>
                <tr>
                    <th>TIME</th>
                    <th>%user</th>
                    <th>%nice</th>
                    <th>%system</th>
                    <th>%iowait</th>
                    <th>%idle</th>
                </tr>

                </thead>


                <tbody>

                <tr>
                    <td class="removeMe">[X]</td>
                    <td class="removeMe">[X]</td>
                    <td class="removeMe">[X]</td>
                    <td class="removeMe">[X]</td>
                    <td class="removeMe">[X]</td>
                    <td class="removeMe">[X]</td>
                </tr>

                <tr>
                    <td>12:10:01 AM</td>
                    <td>28.86</td>
                    <td>0.04</td>
                    <td>1.65</td>
                    <td>0.08</td>
                    <td>69.36</td>
                </tr>
                <tr>
                    <td>12:20:01 AM</td>
                    <td>26.54</td>
                    <td>0.00</td>
                    <td>1.64</td>
                    <td>0.08</td>
                    <td>71.74</td>

                </tr>
                <tr>
                    <td>12:30:01 AM</td>
                    <td>29.73</td>
                    <td>0.00</td>
                    <td>1.66</td>
                    <td>0.09</td>
                    <td>68.52</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>

</div>

Upvotes: 2

stevenelberger
stevenelberger

Reputation: 1368

Could try something like this:

$('.removeMe').click(function() {
    var indexToRemove = $(this).index();
    $(".defaultTable tbody tr").each(function() {
        $(this).find("td:eq("+indexToRemove+")").remove();
     });
});

Edit:

Here's a fiddle which will remove them, the headers, and any dynamically-created columns as well. It uses jQuery's .on() method with delegated events so that even elements which are created dynamically will have this event listener added to them. .click() is a direct binding and will only bind it to elements which already exist so newly-created elements won't have the event listeners binded to them.

Fiddle: http://jsfiddle.net/stevenelberger/dsL31yek/

Upvotes: 2

Shabbir Ahmed
Shabbir Ahmed

Reputation: 114

You could try by getting column number from table

$('.removeMe').click(function(){
var colNum = $(this).parent().children().index($(this));// getting the column number
console.log(colNum);
$(".defaultTable tbody tr").each(function() {
$(this).find("td:eq("+colNum+")").remove();
});                         

});

Upvotes: 0

Denis Matafonov
Denis Matafonov

Reputation: 2802

var index = $(this).index();

$(".defaultTable tr").each(function() {

     //remove body
     $(this).find("td:eq("+index+")").remove();

     //and head
     $(this).find("th:eq("+index+")").remove();
});

DEMO

Upvotes: 0

Related Questions