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

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

0 голосов
/ 03 ноября 2018

Я создаю пользовательский интерфейс со ссылкой на 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 !!!!!");
  });

});

Спасибо

Ответы [ 2 ]

0 голосов
/ 03 ноября 2018

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), в противном случае - если у вас более одной страницы - код будет исполняться более одного раза. В вашем примере примерно так:

Markup: 

<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 !!!");
  });
});
0 голосов
/ 03 ноября 2018

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

А затем сделайте: - 

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

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

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

...