CODEWITHSUNDEEP
jquery
Vel
Vel

Reputation: 9331

Remove next td - javascript

whats error in my code?. remove next one td element if it is empty. I am Struggling with this code.

$(document).on("click", ".expand_img" , function(e ) {       
        var ColsCount =$(this).parents('td').next('td').length;
        var counter =0;
        var nextCols = $(this).parents('td').next('td');
        if (nextCols.contents().length == 0) {
                $(this).hide();         }
        var next = $(this).parents('td').next('td');
            if ((next.contents().length == 0) && ($(this).parents('td').next('td').length==1)){
                next.remove();
            }
         if (ColsCount!="") {
            $(this).parents('td').attr('colSpan', '' + parseInt(ColsCount + 1,10) + '')
         }
        else if(ColsCount=="") {
            counter = 1;
         }

    });

my html code is here

<tr>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
    <td class="ui-droppable ui-sortable content" colspan="1">
      <span>
        <img src="images/Close-icon.png" class="close_img">
        <img src="images/expand.png" class="expand_img">iPod
      </span></td>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
</tr>

Upvotes: 0

Views: 663

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$(document).on("click", ".expand_img" , function(e ) {       
    var colsSpan = 0;
    var $parentTD = $(this).closest('td');//get parent td of image clicked
    //iterate through next td 
    while($parentTD.next('td').length > 0)
    {
      var $nextTD = $parentTD.next('td');

      if($nextTD.contents().length == 0)
        {
          $nextTD.remove();
          colsSpan++;
        }
      else
       {
        //shift to next to parent td
        $parentTD = $nextTD;
       }
     }

    if(colsSpan > 0)
      $(this).closest('td').attr('colSpan',colsSpan);        
});

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

use closest() to find the closest td of expand_img

 var nextCols = $(this).closest("td").next('td');

Upvotes: 1

Rahul Desai
Rahul Desai

Reputation: 15501

Use .parent() to access the element's parent and NOT .parents('td').

Readup: .parent() | jQuery

In your code, you were accessing the wrong parent. .parent() will give you the <span> and .parent().parent() will give you the <td> that you need.

Working Code Snippet:

$(document).on("click", ".expand_img" , function(e ) {       
  var ColsCount =$(this).parents('td').next('td').length;
  var counter =0;
  var nextCols = $(this).parent().parent().next('td');
  if (nextCols.contents().length == 0) {
    $(this).hide();         }
  var next = $(this).parents('td').next('td');
  if ((next.contents().length == 0) && ($(this).parent().parent().next('td').length==1)){
    next.remove();
  }
  if (ColsCount!="") {
    $(this).parents('td').attr('colSpan', '' + parseInt(ColsCount + 1,10) + '')
  }
  else if(ColsCount=="") {
    counter = 1;
  }

});      
table, tr, td{
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
    <td class="ui-droppable ui-sortable content" colspan="1">
      <span>
        <img src="images/Close-icon.png" class="close_img">
        <img src="images/expand.png" class="expand_img">
        iPod
      </span>
    </td>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
    <td class="ui-droppable ui-sortable content" colspan="1"></td>
  </tr>
</table>

Upvotes: 1

Related Questions