Remove created element by id using jquery

Question

i have a table for enter name and details. i have create new fields from a button but i can't remove anyone of my create except original one. i try increase span class name for help to delete but nothing.Please help me to get it solve. Thanks in advance..

My original data table

<span class="source">
    <span id="sprtdiv" class="tab1">
        <table width="90%" border="1">
            <tr><td><input type="text" class="yuzdeyetmis" name="partname[]" value="" id="pname" placeholder="Name" /><div id="tab1" class="yuzdeotuz"> DELETE </div></td></tr>
            <tr><td><textarea rows="3"  name="partdetay[]" id="pdetay" placeholder="Detail"></textarea></td></tr>
       </table> 
    </span>
</span>
<input type="button" id="add_more_part" class="upload" value="Add New Record"/>

and i want to add and remove new data parts

$(".yuzdeotuz").click(function(){
    var strtab = $(this).attr('id');
    alert(strtab );
    $("."+strtab).remove();

});
//  To add new bolum stream source field dynamically, on click of "Add More Source" button 
$('#add_more_part').click(function() {

    var tabcount = $('.yuzdeotuz').length;
    if (tabcount == 1 || tabcount != 1)
    {
        tabcount++; 
        mytab = "tab"+tabcount;
    }

    $(".source").append('<span id="sprtdiv" class='+mytab+'><table width="90%" border="1"><tr><td><input type="text" class="yuzdeyetmis" name="partname[]" value="" id="pname" placeholder="Name" /><div id='+mytab+' class="yuzdeotuz"> DELETE </div></td></tr><tr><td><textarea rows="3"  name="partdetay[]" id="pdetay" placeholder="Detail"></textarea></td></tr></table> </span>');
});

For my working codes https://jsfiddle.net/c71Lmkeh/2/`

Mauro · Answer 1 · 2016-03-29T00:05:56.717

0

if you need to add events in to elements inserted in to the DOM, you need to use the .on() function. Check this link and it will solve your problem

edited Mar 29 '16 at 00:05

answered Mar 29 '16 at 00:00

Mauro

1,472
12
22

score 0 · Answer 2 · answered Mar 29 '16 at 00:05

This isn't elegant. I added this function (had to add it to Window - apparently it's a jsFiddle thing.)

window.deleteRecord = function(deleteButton) {
  var deleteButtonRow = $(deleteButton).closest("tr");
  var textAreaRow = deleteButtonRow.next("tr");
  deleteButtonRow.remove();
  textAreaRow.remove();
}

Then to the "delete" div I added

onclick = "deleteRecord(this);"

It would be a little easier if the elements weren't spread across table rows, because that means having to delete both table rows. It's more common now just to use divs, so all of the elements for one record would be inside the one div, and you just delete that.

So in this case I'm deleting the row that the "delete" div is in and the next row.

score 0 · Answer 3 · answered Mar 29 '16 at 00:16

0

Is this what you're looking for?

Demo + Source code

JavaScript:

  $(".add").on("click", function() {
    var newDiv = $("<div class='details'><div class='inputs'><input type='text' class='input1'/><br/><br/><input type='text' class='input2'/></div><div class='button'><a href='#' class='delete'>Delete</a></div><br/></div>")
    $(".source").append(newDiv);
    $(newDiv).on("click", "a", function() {
      $(newDiv).remove();
    });
  });

answered Mar 29 '16 at 00:16

Ray

9,184
3
27
44

thnks i need this...it works... – user2175535 Mar 30 '16 at 22:25
@user2175535 I tested it out numerous amount of times and did not show any bugs. Yes it does work but feel free to inform me if found something wrong. Other than that, please do mark it as solved if it's **exactly** what you've wanted. – Ray Mar 30 '16 at 22:30

Remove created element by id using jquery

3 Answers3