JQuery remove не работает должным образом

Question

У меня проблема, когда $('element').remove(); не работает. Я прочитал много других ответов, где есть проблемы с синтаксисом, и щелчок не зарегистрирован на кнопке правильно.

У меня другая проблема. Щелчок работает, но удаляется только одно: newRowDiv.

Она начинается <newRowDiv><child><child><child></newRowDiv> и заканчивается <child><child><child> newRowDiv ушел, но дети просто оставили там. Странная вещь код работает отлично, пока я не добавить trigger('create')

Это о том, что мой код делает

buildRows = function(){ 
 
      //Adds the new div to the placement div 
 
      var placementDiv = $('#placementDiv'); 
 
      placementDiv.append("<div class='newRowDiv'></div>"); 
 
      //Adds the child elements to the new div 
 
      var newRowDiv = $(".newRowDiv:last"); 
 
      newRowDiv.append("<label>Title</label>"); 
 
      newRowDiv.append("<input>"); 
 
      newRowDiv.append("<a id='plusButton'>Plus</a>"); 
 

 
      //Adds the click event to the new plus button (Works fine) 
 
      newRowDiv.find('#plusButton').click(function (event) { 
 
       var button = $(event.target); 
 
       //Adds the delete button (Works fine) 
 
       var newRowDiv = button.parent('.newRowDiv'); 
 
       newRowDiv.append('<a id="deleteButton">Delete</a>'); 
 
       //Adds the click event to the button (Works fine) 
 
       newRowDiv.find('#deleteButton').click(function (event) { 
 
        //Removes the parent newRowDiv and all child elements (Doesn't work) 
 
        var button = $(event.target); 
 
        button.closest('.newRowDiv').remove(); 
 
       }); 
 

 
       //Removes the plus button (Works fine) 
 
       button.remove(); 
 

 
       //Adds the new rows section (Works fine) 
 
       buildRows(); 
 
       //Without this the new elements don't display correctly 
 
       //With this the remove only removes the element and leaves it's children behind 
 
       placementDiv.trigger('create'); 
 
      }); 
 
     } 
 
buildRows()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="placementDiv"> 
 
    </div>

Edit: фрагмент кода работает. Я просто нажимаю на проблему, когда запускаю триггер. ('Create'), который добавляет форматирование jQuery для мобильных устройств

Редактировать 2: Кажется, что это связано с форматированием всплывающего окна jquery mobile. Поскольку он отлично работает в фрагменте кода без всплывающего окна, и он отлично работает в моем исходном коде, прежде чем добавить триггер ('create')

Answer 1

Попробуйте использовать .delegate() вместо .click().