Удалить столбец из таблицы css

Question

Я думаю, что я получил строку удаления, но кнопка удаления столбца работает неправильно.

Здесь код fiddle. Благодарим вас за помощь.

HTML

<br/> 
<button id="css-irow">Row +</button><br/> 
<button id="css-drow">Row -</button><br/> 
<button id="css-icol">Col +</button> 
<button id="css-dcol">Col -</button> 

JQuery

$('#css-irow').click(function(){ 
     $(".ws-css-table-tr:last").clone(false).appendTo('.ws-css-table') 
     .find(".ws-css-table-td").text(""); 
}); 

$('#css-drow').click(function(){ 
    $(".ws-css-table-tr:last-child").remove(); 
}); 


$('#css-icol').click(function(){ 
    $(".ws-css-table-tr").each(function(i, row){ 
     $(".ws-css-table-td:last", row).clone().appendTo(row).text(""); 
    }); 

$('#css-dcol').click(function(){ 
$(".ws-css-table-td:last-child").remove(); 
}); 

CSS

.ws-css-table { 
    display: table; 
} 
.ws-css-table-tr { 
    display: table-row;  
} 
.ws-css-table-td { 
    display: table-cell; 
    border:1px solid #000; 
    width: 15px; 
    height:15px; 
    text-align:center; 
    vertical-align:middle; 
} 

Answer 1

Его, потому что у вас есть закрытие перепутались. Удаление столбца внутри столбца добавляется так, чтобы событие клика не было прикреплено, пока вы не добавите столбец.

Fiddle: https://jsfiddle.net/x7865gka/6/

$('#css-icol').click(function() { 
    $(".ws-css-table-tr").each(function (i, row) { 
     $(".ws-css-table-td:last", row).clone().appendTo(row).text(""); 
    }); 
}); 

$('#css-dcol').click(function() { 
    $(".ws-css-table-td:last-child").remove(); 
}); 

Answer 2

попробовать это ... Вы код был несколько вопросов, в том числе обработки случая, когда таблица пуста.

function generateDefaultRow() { 
 
    return $('<div class="ws-css-table-tr"><div class="ws-css-table-td"></div></div>'); 
 
} 
 

 
$('#css-irow').click(function() { 
 
    var row = $(".ws-css-table-tr:last"); 
 
    if(row.length === 0) { 
 
     row = generateDefaultRow(); 
 
    } 
 
    row.clone().appendTo('.ws-css-table') 
 
     .find(".ws-css-table-td").text(""); 
 
}); 
 

 
$('#css-drow').click(function() { 
 
    $(".ws-css-table-tr:last-child").remove(); 
 
}); 
 

 
$('#css-icol').click(function() { 
 
    var rows = $(".ws-css-table-tr"); 
 
    if(rows.length === 0) { 
 
     generateDefaultRow().appendTo('.ws-css-table') 
 
     .find(".ws-css-table-td").text(""); 
 
    } else { 
 
     rows.each(function(i, row) { 
 
      $(".ws-css-table-td:last", row).clone().appendTo(row).text(""); 
 
     }); 
 
    } 
 
}); 
 

 
$('#css-dcol').click(function() { 
 
    $(".ws-css-table-td:last-child").remove(); 
 
    if($(".ws-css-table-td").length === 0) { 
 
     $(".ws-css-table-tr").remove(); 
 
    } 
 
});

.ws-css-table { 
 
    display: table; 
 
} 
 
.ws-css-table-tr { 
 
    display: table-row;  
 
} 
 
.ws-css-table-td { 
 
    display: table-cell; 
 
    border: 1px solid #000; 
 
    width: 15px; 
 
    height: 15px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
 

 
<div class="ws-css-table"> 
 
    <div class="ws-css-table-tr"> 
 
     <div class="ws-css-table-td"></div> 
 
     <div class="ws-css-table-td"></div> 
 
    </div> 
 
    <div class="ws-css-table-tr"> 
 
     <div class="ws-css-table-td"></div> 
 
     <div class="ws-css-table-td"></div> 
 
    </div> 
 
    <div class="ws-css-table-tr"> 
 
     <div class="ws-css-table-td"></div> 
 
     <div class="ws-css-table-td"></div> 
 
    </div>  
 
</div> 
 

 
<div> 
 
    <button id="css-irow">Row +</button><br/> 
 
    <button id="css-drow">Row -</button><br/> 
 
    <button id="css-icol">Col +</button> 
 
    <button id="css-dcol">Col -</button> 
 
</div>