Добавление элементов на страницу динамически, а затем их удаление

Question

Я настроил элемент управления jQuery, который динамически добавляет таблицу, содержащую текстовые поля на страницу.

Добавляющая часть работает нормально, но функция удаления в конце срабатывает независимо от того, где я нажимаю в таблице ... Я просто хочу, чтобы она удаляла таблицу, когда я нажимаю кнопку удаления.

Есть ли лучший способ установить это?

Благодаря

var linkCounter = 1; 

    $("#btnAddLink").click(function() { 
     if (linkCounter > 10) { 
      alert("Only 10 learning objectives allowed per page."); 
      return false; 
     } 

     var newTextBoxDiv = $(document.createElement('div')).attr("id", 'link' + linkCounter); 
     newTextBoxDiv.after().html(
      '<table>' + 
       '<tr><td>' + 
       '<label>URL: </label>' + 
       '</td><td>' + 
       '<input type="text" name="tbLinkUrl" style="width: 300px;"' + 
       '" id="tbLinkUrl' + counter + '" value="" >' + 
       '</td></tr><tr><td>' + 
       '<label>Label: </label>' + 
       '</td><td>' + 
       '<input type="text" name="tbLinkLabel" style="width: 300px;"' + 
       '" id="tbLinkLabel' + counter + '" value="" >' + 
       '</td></tr></table>'); 
      newTextBoxDiv.Append.Html(
       '&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">').click(function() { 
        $(this).remove(); 
        linkCounter--; 
       }); 
     newTextBoxDiv.appendTo("#linksGroup"); 
     linkCounter++; 
    }); 

Answer 1

Я переместил связывание вне события AddLink связывании вашего события удалить щелчок. Теперь он делегирован из органа. В моем примере ниже событие делегировано всем элементам класса «removeLink». Нажав на кнопку, удалите ее родителя.

Я сделал несколько небольших изменений, чтобы заставить его работать как демо. Важная часть - делегат внизу (с использованием).

Demo

Html:

<input id="btnAddLink" value="Click!" type="button" /> 

Javascript:

var linkCounter = 1; 

$("#btnAddLink").click(function() { 
    if (linkCounter > 10) { 
     alert("Only 10 learning objectives allowed per page."); 
     return false; 
    } 
    var newTextBoxDiv = $("<div>").attr("id", 'link' + linkCounter); 
    $(this).after(newTextBoxDiv); 
    newTextBoxDiv.html(
     '<table>' + 
     '<tr><td>' + 
     '<label>URL: </label>' + 
     '</td><td>' + 
     '<input type="text" name="tbLinkUrl" style="width: 300px;"' + 
     '" id="tbLinkUrl' + linkCounter + '" value="" >' + 
     '</td></tr><tr><td>' + 
     '<label>Label: </label>' + 
     '</td><td>' + 
     '<input type="text" name="tbLinkLabel" style="width: 300px;"' + 
     '" id="tbLinkLabel' + linkCounter + '" value="" >' + 
     '</td></tr></table>'); 
    newTextBoxDiv.append('&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">'); 
    newTextBoxDiv.appendTo("#linksGroup"); 
    linkCounter++; 
}); 

$('body').on('click','.removeLink',function(){ 
    $(this).parent().remove(); 
    linkCounter--; 
}); 

Answer 2

Попробуйте добавить обработчик щелчка, как это:

newTextBoxDiv.Append.Html(
      '&nbsp;&nbsp;<input type="button" id='removebutton' value="Remove" class="removeLink">'); 
$('#removebutton').click(function() { 
       $('#mytable').remove(); 
       linkCounter--; 
      }); 

и дать таблицу идентификатор 'туЬаЫе'.

Answer 3

Каждый вызов функции в jQuery возвращает объект jQuery, поэтому вы можете объединить несколько вызовов. Но все они основаны на исходном объекте:

здесь:

newTextBoxDiv.append.html(
      '&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">').click(function() { 
       $(this).remove(); 
       linkCounter--; 
      }); 

Вы присоединените вход кнопки типа в DIV. Но тогда вы устанавливаете событие click на элементе newTextBoxDiv, не кнопка.

Создайте свою кнопку, добавить функцию щелчка, а затем добавить его:

$('&nbsp;&nbsp;<input type="button" value="Remove" class="removeLink">') 
    .click(function() { 
       $(this).siblings('table').remove(); 
       linkCounter--; 
    }).appendTo(newTextBoxDiv);