Unable to delete row using jquery which was dynamically created-CodePudding

I am creating new rows using jquery and want to delete that row when delete button is pressed. Adding new row part is working fine and the problem is in delete part. When I click on delete button then nothing happens. It doesn't even show alert which is written in code. It seems to me like delete button is not even getting pressed. How can I delete that particular record when delete button is pressed?

JSfiddle is given below
https://jsfiddle.net/ec2drjLo/

<div >
        <div>
            Currency: <input type="text" id="currencyMain">
        </div>
        <div>
            Amount: <input type="text" id="amountMain">
        </div>
        <div>
            <button id="addAccount">Add Account</button>
        </div>
    </div>
    <div id="transactionRow">
    </div>

CodePudding user response：

As you have added the elements as a string, they are not valid HTML elements and that's why you can't add an event listener. You can add the click event to the document body and capture the event target, like

$(document).on('click', function (e){
            if(e.target.className === 'deleteClass'){
               //process next steps
            }
    }

You can try the demo below, not sure if it's the result you need, but the delete button works. Hope it helps!

        let accountCount = 0;
        $("#addAccount").click(function (e)
        {
            accountCount  ;
            let mystring = "<label class=\"ok\" id=\"[ID]\">[value]</label>";
            let deleteString = "<button class=\"deleteClass\" id=\"deleteAccount"  accountCount  "\">Delete Account</button>";
            
            let currency = mystring.replace("[ID]", "currency"  accountCount).replace("[value]", $("#currencyMain").val());
            let amount = mystring.replace("[ID]", "amount"  accountCount).replace("[value]", $("#amountMain").val());
            
            $("#transactionRow").append(currency);
            $("#transactionRow").append(amount);
            let div = document.createElement('div');

            div.innerHTML =deleteString;
            $("#transactionRow").append(div);
            
            
            $("#currencyMain").val('');
            $("#amountMain").val('')
        });
        
        $(document).on('click', function (e)
        {
          if(e.target.className === 'deleteClass'){
            
              var content = $("#transactionRow").html();
              var pos = content.lastIndexOf("<label class=\"ok");
                    
              if(pos > 5)
                  $("#transactionRow").html(content.substring(0,pos));
              else
                  alert("You cannot delete this row as at least one Account must be present"); 
            }
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div >
        <div>
            Currency: <input type="text" id="currencyMain">
        </div>
        <div>
            Amount: <input type="text" id="amountMain">
        </div>
        <div>
            <button id="addAccount">Add Account</button>
        </div>
    </div>
    <div id="transactionRow" style="border: 1px solid grey">
    </div>