dynamically add the row in the html jquery

Question

var counter = 0;
$(document).ready(function(){
    
    
    $(".add").click(function(){
       
        var divm = "<div class='row form-group '></div>";
        var methodargs= "methodargs"+counter;
        var labelvar = "<div class='col-sm-2 col-form-label'><label for='arguments'>Method Arguments</label></div>";
        var inputkey = "<div class='col-sm-3'><input type='text' placeholder='KEY' id='arguments' class='form-control key' required></div>";
        var inputvalue= "<div class='col-sm-3'><input type='text'  placeholder='VALUE' id='arguments' class='form-control val' required></div>";
        var  addbtn = "  <div class='col-sm-2'><button type='button' class='btn btn-small btn-primary '>Add</button></div>";
        var  delbtn = " <div class='col-sm-2'><button type='button'  class='btn btn-small btn-danger '>delete</button></div>";
       $(divm).addClass(methodargs).append(labelvar).append(inputkey).append(inputvalue).append(addbtn).append(delbtn).insertAfter(".methodargs")
       var key="key"+counter;
       var value="value"+counter;

       $(".key").attr("name",key);
       $(".val").attr("name",value);
       $(".btn-primary").addClass("add");
       $(".btn-danger").addClass("delete")
       counter++;
        
    })

    $(".delete").click(function()
    {   
        console.log("Hello world");
        counter--;
        var currentdel = ".methodargs"+counter;
        $(currentdel).remove();
        console.log(currentdel);
    })

})

Problems: Why dynamically added row buttons add and delete are not working ?

`$(".delete").click` only applies to elements that exist *at the time the code runs* - eg `console.log($(".delete").length)` will likely == 0. — freedomn-m, Feb 08 '22 at 17:51

dynamically add the row in the html jquery

0 Answers0