Remove DIV dynamically with JQuery

Question

i have a problem to reference an identifier of a DIV. I allow to add a div with a text field and a button to delete the text field, and i set a id to the DIV like an array with this code:

$('#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>' +
        '');
    });

So.. if i press on the botton at the at the side of the text area, i'll call a function that will remove it. The skeleton of the function is the follow:

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

So my ask is: How can i insert between the square brackets the right identifier of the div?

$('#eliminacorso[' + $count + ']').remove() (though you probably want to do this before you -- ) — fdomn-m
– fdomn-m, Commented Jul 5, 2017 at 12:55
instead of using id use button class and use event delegation.$(document).on('click','.btn-default',function(){$(this).parent('.form-group').remove();}); — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Jul 5, 2017 at 12:55

Death-is-the-real-truth · Accepted Answer · 2017-07-05 13:17:45Z

4

A better choice is:-

1.Instead of using id use button class

2.And then use event delegation concept like below:-

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

Reference:- https://api.jquery.com/closest/

edited Jul 5, 2017 at 13:17

answered Jul 5, 2017 at 12:57

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gyan · Accepted Answer · 2017-07-05 12:56:52Z

Use as below the script that add DIV. Remove '[' from id attribute from div tag and anchor tag as below

$('#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>' +
    '');
});

And then script to get the clicked id and remove the matched div on click of button as below

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

Mitesh Gadhiya · Accepted Answer · 2017-07-05 13:04:10Z

Try below code.It may help you

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>

Vinothkumar Arputharaj · Accepted Answer · 2017-07-05 13:07:07Z

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

Try this code.

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

Add a class attribute to the <a> tag.

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();
    });

Notice the usage of on function. It should be like below

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

Raj · Accepted Answer · 2017-07-05 13:09:30Z

0

You can use something like this

var count = 3;

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

});

<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>

edited Jul 5, 2017 at 13:09

answered Jul 5, 2017 at 12:57

Raj

2,0343 gold badges32 silver badges57 bronze badges

Comments

Jayrag Pareek · Accepted Answer · 2021-11-30 09:02:54Z

Try this:

var $count = 0
        $('#aggiungi').on('click', function () {
            $count++;
            let divId = `input_div_${$count}`;
            let html = `<div class="form-group row" id="${divId}">
                                    <label class="col-sm-2 col-form-label" for="corsi">Input ${$count}</label>
                                    <div class="col-sm-10 form-inline">
                                        <input type="text" class="form-control" id="input" name="${divId}"/>
                                        <button type="button" id="remove_btn_${$count}" aria-label="Elimina" onclick="remove('${divId}');">
                                            remove
                                        </a>
                                    </div>
                                </div>`;
            $('#main-div').append(html);
        });

        function remove(removeDivId) {
            console.log(removeDivId);
            $("#" + removeDivId).remove();
        }

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

Collectives™ on Stack Overflow

Remove DIV dynamically with JQuery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related