Entfernen Sie das erstellte Element durch ID mit Hilfe von jquery

Question

Ich habe eine Tabelle für die Eingabe von Namen und Details. Ich habe neue Felder von einer Schaltfläche erstellen, aber ich kann niemanden meiner erstellen außer dem ursprünglichen entfernen. Ich versuche, span Klasse Name für Hilfe zu löschen, aber nichts. Bitte helfen Sie mir, es zu lösen. Vielen Dank im Voraus ..

Meine ursprüngliche Datentabelle

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

und ich will Teile neue Daten

$(".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>'); 
}); 

Für meine Arbeits Codes hinzufügen und entfernen https://jsfiddle.net/c71Lmkeh/2/ `

Answer 1

wenn Sie brauchen Um Ereignisse zu Elementen hinzuzufügen, die in das DOM eingefügt werden, müssen Sie die Funktion .on() verwenden. Überprüfen Sie this link und es löst Ihr Problem

Answer 2

Dies ist nicht elegant. Ich habe diese Funktion (musste es Fenster hinzufügen - offenbar ist es eine jsFiddle Sache.)

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

dann zum „Löschen“ Div I

onclick = "deleteRecord(this);" 

Hinzuzufügen wäre ein wenig einfacher, wenn das sein Elemente wurden nicht über Tabellenzeilen verteilt, da dies bedeutet, dass beide Tabellenzeilen gelöscht werden müssen. Es ist jetzt üblicher, nur divs zu verwenden, also würden alle Elemente für einen Datensatz innerhalb des einen div liegen, und Sie löschen das einfach.

Also in diesem Fall lösche ich die Zeile, die das "delete" Div in und die nächste Zeile ist.

Answer 3

Ist das wonach Sie suchen?

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