Удалить созданный элемент по id с помощью jquery

Question

У меня есть таблица для ввода имени и деталей. Я создаю новые поля с помощью кнопки, но я не могу удалить ни одного из моих созданий, кроме оригинала. Я пытаюсь увеличить имя класса span, чтобы помочь удалить, но ничего. Пожалуйста, помогите мне решить проблему. Заранее спасибо ..

Моя исходная таблица данных

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

и я хочу, чтобы добавлять и удалять новые части

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

данных Для моих рабочих кодов https://jsfiddle.net/c71Lmkeh/2/ `

Answer 1

, если вам нужно для добавления событий в элементы, вставленные в DOM, вам нужно использовать функцию .on(). Проверьте this link и он решит вашу проблему.

Answer 2

Это не изящно. Я добавил эту функцию (пришлось добавить его в окно - видимо, это jsFiddle вещь.)

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

Затем к «удалить» DIV я добавил

onclick = "deleteRecord(this);" 

Было бы немного легче, если элементы не были распределены по строкам таблицы, потому что это означает необходимость удалить обе строки таблицы. Теперь чаще всего используется divs, поэтому все элементы для одной записи будут внутри одного div, и вы просто удаляете это.

Так что в этом случае я удаляю строку, в которой находится «удалить» div, и следующую строку.

Answer 3

Вы хотите что-то ищите?

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