CODEWITHSUNDEEP
javascriptjqueryhtml
mastrobirraio
mastrobirraio

Reputation: 135

Remove DIV dynamically with JQuery

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?

Upvotes: 1

Views: 2994

Answers (6)

Jayrag Pareek
Jayrag Pareek

Reputation: 374

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>

Upvotes: 0

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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/

Upvotes: 4

Raj
Raj

Reputation: 2028

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>

Upvotes: 0

Vinothkumar Arputharaj
Vinothkumar Arputharaj

Reputation: 4569

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

Upvotes: 0

Mitesh Gadhiya
Mitesh Gadhiya

Reputation: 362

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>

Upvotes: 0

Gyan
Gyan

Reputation: 508

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

Upvotes: 0

Related Questions