在追加行索引时动态删除每一行

Question

我有点困惑如何动态删除每一行，同时相应地更新所有行索引，而不是第 1、2、3 行，而在删除 2 时，行应该追加到 1、2，而不是保留 1 ,3..

jQuery(function(){
    jQuery('a.add-author').click(function(event){
        var number=document.getElementById("noofinputs").value;
        event.preventDefault();
        number++;

        var newRow = jQuery(
            '<tr>'+   
                '<td><textarea class="txtsize" name="item' +number + '" id="item' +number + '" rows="5" cols="32"></textarea></td>'+
                '<td><select name="category' +number + '" id="category' +number + '" style="width:202px;" >'+
                    <?php
                    $q3=mysqli_query($con,"select * from categories ORDER BY category ASC");
                    while ($row3 = mysqli_fetch_assoc($q3)){
                    ?>
                        '<option value="<?php echo $row3['no']; ?>"><?php echo $row3['category']; ?></option>'+
                    <?php
                    } 
                    ?>
                +'</select></td>'+
                '<td>$<input type="text" size="10" name="amount' +number + '" id="amount' +number + '" /></td>'+   
                '<td><a href="#" title="" class="remove-author'+number+'"><img style="cursor: pointer;" height="24px" width="24px;" src="http://../images/Cancel.png" /></a>    </td>'+
            '</tr>');

        jQuery('table.authors-list').append(newRow);
        $('#noofinputs').val(number);
    });
});

$(document).ready(function () {
$(".remove-author").click(function () {
     removeRow(this);
});
});

function removeRow(elem){
var i = 0;
var ii = 0;
var iii = 0;
$(elem).closest('tr').remove();
$("table.authors-list tr").not(':first').each(function (){
    $('td', this).not(':last').each(function() {
    $(this).find('textarea').each(function(){
        $(this).attr('name', 'item' + ( i+1 ));
        i++;
    });
     $(this).find('select').each(function(){
        $(this).attr('name', 'category' + ( ii+1 ));
        ii++;
     });
     $(this).find('input').each(function(){
        $(this).attr('name', 'amount' + ( iii+1 ));
        iii++;
     });
    });
});
var a=document.getElementById("noofinputs").value;
var b = (a - 1);
$('#noofinputs').val(b);    
}

我编辑了代码，但我什至无法删除一行... 我试图关注这个renumber appended table row in javascript after deleting 但它根本不起作用......

已编辑：终于可以将其删除并在进行一些更改后重新编号其“数字”名称属性！

Answer 1

编辑：看起来您需要从<a href="#" title="" class="remove-author'+number+'"> 中删除number。只需将其保留为<a href="#" title="" class="remove-author">。

您还想删除$('.remove-author').each(function(){

jQuery 不会作用于动态创建的元素。因此，您需要创建一个新函数并将其注入 <a> 元素（不是最佳解决方案，但无需大量修改代码即可工作）

所以你的代码应该是

$(document).ready(function () {
    $(".remove-author").click(function () {
         removeRow(this);
    });
});

function removeRow(elem){
    $(elem).closest('tr').remove();

    $("table.authors-list tr").each(function (i){
        var txt = $(this).find('textarea').attr('name');
        $(this).find('textarea').attr('name', txt.replace(/\d+/, i+1)); 
        var sel = $(this).find('select').attr('name');
        $(this).find('select').attr('name', sel.replace(/\d+/, i+1)); 
        var amt = $(this).find('input').attr('name');
        $(this).find('input').attr('name', amt.replace(/\d+/, i+1));
    });
}

现在您需要将此添加到 <a> 元素中

<a href="#" title="" class="remove-author" click="removeRow(this);">