Как убрать динамически добавляемый складной в JQM

Question

Я создаю пользовательский интерфейс со ссылкой на Jquery Mobile, но застрял в мысли о том, как удалить динамически добавляемый сворачиваемый объект в примере, приведенном в Jquery Mobile Demos.

http://demos.jquerymobile.com/1.4.5/collapsible-dynamic/

Я создал пример для того же. JSBIN

JS Используется:

console.log("DOM Load");
$( document ).on( "pagecreate", function() {
    var nextId = 1;
    $("#add").click(function() {
    nextId++;
      var content = "";
    content += "<div data-role='collapsible' id='set" + nextId + "'>";
    content += "<h3>Section " + nextId + "</h3>";
    content += "<p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p>";
    content += "<button id='removeStyle" + nextId + "' class='removeStyleBtn ui-btn ui-btn-b ui-shadow ui-corner-all ui-mini'>Remove</button></div>";

    $( "#set" ).append( content ).collapsibleset( "refresh" );
    //$("#set" + nextId+ " :button").button().button('refresh');
    $("#set" + nextId).collapsible( "expand" );
    console.log("collapsible set " + nextId + " added !!!");
  });
  console.log("pagecreate triggered !!!");

  $(".removeStyleBtn").click(function() {
    console.log("Removed Element !!!!!");
  });

});

Спасибо

Answer 1

id должен быть уникальным для каждого элемента, поэтому удалите кнопку id(не требуется в вашем случае)

А потом делай:-

$(document).on("click",".removeStyleBtn",function() {
    $(this).closest('div[data-role="collapsible"]').remove();
});

Поместите этот код за пределы $(document).ready(){..});

Вывод:- https://jsbin.com/vuyehocate/edit?html,js

Answer 2

jQuery Mobile улучшает разметку на вашей странице, но вам даже не нужно точно знать расширенную иерархию DOM-Tree. В предоставленной демоверсии вам нужно найти первый collapsible выше Remove кнопка.

Вот:

$(document).on("vclick", ".removeStyleBtn", function() {
  var parentCollapsible = $(this).closest('div[data-role="collapsible"]');
  var parentCollapsibleSet = $(parentCollapsible).closest('div[data-role="collapsibleset"]');
  $(parentCollapsible).collapsible("destroy");
  $(parentCollapsible).remove();
  $(parentCollapsibleSet).collapsibleset("refresh");
});

Кстати, я бы предложил Вам также отфильтровать pagecreate событие только для страницы, которая содержит складной набор (или использовать switch заявление) в противном случае - если у вас более одной страницы - код будет выполнен более одного раза. В вашем примере примерно так:

Разметка:

<div data-role="page" id="page-with-collapsible">

JS:

$(document).on("pagecreate", "#page-with-collapsible", function() {
  var nextId = 1;
  $("#add").click(function() {
    nextId++;
    var content = "";
    content += "<div data-role='collapsible' id='set" + nextId + "'>";
    content += "<h3>Section " + nextId + "</h3>";
    content += "<p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p>";
    content += "<button id='removeStyle" + nextId + "' class='removeStyleBtn ui-btn ui-btn-b ui-shadow ui-corner-all ui-mini'>Remove</button></div>";
    $("#set").append(content).collapsibleset("refresh");
    $("#set" + nextId).collapsible("expand");
    console.log("collapsible set " + nextId + " added !!!");
  });
});

Answer 3

попробуй это: