Question

我有一个问题是引用DIV的标识符。我允许添加带有文本字段的div和用于删除文本字段的按钮，并使用此代码将ID设置为DIV，如数组：

$('#aggiungi').on('click',function () {
        $count ++;
        $('#corsi').append(
            '<div class="form-group row" id="corso['+$count+']>' +
                '<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
                '<div class="col-sm-10 form-inline">' +
                    '<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
                    '<a class="btn btn-default" id="eliminacorso['+$count+']" aria-label="Elimina">' +
                        '<i class="fa fa-times" aria-hidden="true"></i>' +
                    '</a>' +
                '</div>' +
            '</div>' +
        '');
    });

所以..如果我按下文本区域侧面的按钮，我会调用一个删除它的功能。该函数的骨架如下：

$('#eliminacorso[]').on('click', function() {
  $count --;
  $('#corso[]').remove();
});

所以我的问题是：如何在方括号之间插入div的正确标识符？

Answer 1

更好的选择是： -

1.而不是使用id使用按钮class

2.然后使用event delegation概念，如下所示： -

$(document).on('click','.btn-default',function(){
 $(this).closest('.form-group').remove();
});

参考： - https://api.jquery.com/closest/

Answer 2

使用如下添加DIV的脚本。从div标签和锚标签中删除'['来自id属性，如下所示

$('#aggiungi').on('click',function () {
    $count ++;
    $('#corsi').append(
        '<div class="form-group row" id="corso'+$count+'>' +
            '<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
            '<div class="col-sm-10 form-inline">' +
                '<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
                '<a class="btn btn-default" id="corso'+$count+'" aria-label="Elimina">' +
                    '<i class="fa fa-times" aria-hidden="true"></i>' +
                '</a>' +
            '</div>' +
        '</div>' +
    '');
});

然后编写脚本以获取点击的ID并在点击按钮时删除匹配的div，如下所示

$('.btn').on('click', function() {
   var selectedId = $(this).attr('id');
   $('#'+selectedId).remove();
});

Answer 3

你可以使用这样的东西

＆＃13;

var count = 3;

$('button').click(function(){
  count--;
  $($('.corso')[count]).remove();  

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="corso">1. <input type="text" /></div><br />
<div class="corso">2. <input type="text" /></div><br />
<div class="corso">3. <input type="text" /></div><br />
<br />
<button>Remove</button>

＆＃13;

Answer 4

尝试下面的代码。它可以帮到你

var $count =0
$('#aggiungi').on('click',function () {
        $count ++;
        $('#corsi').append(
            '<div class="form-group row" id="corso_'+$count+'">' +
                '<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
                '<div class="col-sm-10 form-inline">' +
                    '<input type="text" class="form-control" id="corso" name="corso_'+ $count + '"/>' +
                    '<a class="btn btn-default" id="eliminacorso_'+$count+'" aria-label="Elimina" onclick="remove(this);">' +
                        'Test' +
                    '</a>' +
                '</div>' +
            '</div>' +
        '');
    });
    
    function remove(aRemove){
    console.log(aRemove);
    var divid = aRemove.id.replace("eliminacorso_","corso_");
    $("#" + divid).remove();
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="aggiungi"> Click ME </button>
<div id="corsi">
</div>

Answer 5

https://codepen.io/vino4all/pen/vZrQEX

试试这段代码。

<button id="aggiungi">Click</button>
<div id="corsi"></div>

将类属性添加到<a>标记。

var $count = 0;
$('#aggiungi').on('click',function () {
        $count ++;
        $('#corsi').append(
            '<div class="form-group row" id="corso['+$count+']>' +
                '<label class="col-sm-2 col-form-label" for="corsi">Corso ' + $count +'</label>' +
                '<div class="col-sm-10 form-inline">' +
                    '<input type="text" class="form-control" id="corso" name="corso['+ $count + ']"/>' +
                    '<a class="btn btn-default delBtn" id="eliminacorso['+$count+']" aria-label="Elimina"><span>X</span>' +
                        '<i class="fa fa-times" aria-hidden="false"></i>' +
                    '</a>' +
                '</div>' +
            '</div>' +
        '');
    });

$('#corsi').on('click', '.delBtn', function() {
console.log('this :'+$(this));
  $count --;

  $(this).parent().parent().remove();
    });

注意on功能的用法。它应该像下面的

$('#corsi').on('click', '.delBtn', fun);

使用JQuery动态删除DIV

5 个答案: