jquery - Remove DIVs others than clicked does not work -
i trying delete divs other clicked 1 using jquery in html:
<div id="categories-picker"> <h2>seleccione una categorÃa</h2> <div class="product-left" id="cstep1"> <ul id="step1"> <li><a data-resp="main" data-id="1" class="step" href="#">monitors</a></li> <li><a data-resp="main" data-id="2" class="step" href="#">cameras</a></li> <li><a data-resp="main" data-id="4" class="step" href="#">scanners</a></li> <li><a data-resp="main" data-id="5" class="step" href="#">printers</a></li> <li><a data-resp="main" data-id="6" class="step" href="#">mice , trackballs</a></li> <li><a data-resp="main" data-id="7" class="step" href="#">mac</a></li> <li><a data-resp="main" data-id="8" class="step" href="#">pc</a></li> <li><a data-resp="main" data-id="9" class="step" href="#">software</a></li> <li><a data-resp="main" data-id="10" class="step" href="#">components</a></li> <li><a data-resp="main" data-id="11" class="step" href="#">phones &amp; pdas</a></li> <li><a data-resp="main" data-id="12" class="step" href="#">desktops</a></li> <li><a data-resp="main" data-id="13" class="step" href="#">mp3 players</a></li> <li><a data-resp="main" data-id="14" class="step" href="#">laptops &amp; notebooks</a></li> <li><a data-resp="main" data-id="15" class="step" href="#">windows</a></li> <li><a data-resp="main" data-id="16" class="step" href="#">macs</a></li> <li><a data-resp="main" data-id="17" class="step" href="#">tablets</a></li> </ul> </div> <div id="cstep2" class="product-left"> <ul id="step2"> <li><a href="#" data-id="3" class="step">web cameras</a></li> <li><a href="#" data-id="21" class="step">test4</a></li> <li><a href="#" data-id="22" class="step">test5</a></li> </ul> </div> <div id="cstep3" class="product-left"> <ul id="step3"> <li><a href="#" data-id="23" class="step">test6</a></li> <li><a href="#" data-id="24" class="step">test7</a></li> <li><a href="#" data-id="25" class="step">test8</a></li> <li><a href="#" data-id="26" class="step">test9</a></li> </ul> </div> </div> for example according code above if click a less a#data-id=1 inside div#cstep1 div#cstep2 , div#cstep3 should removed, if click a#data-id=3 next div#cstep3 should removed. if click element divs should repainted new elements coming $.ajax call. wrote code it's not working since removes divs can not create anymore, happens when click example element on div#cstep1. i've tried 2 ways: 1 based on arrays , second 1 based on jquery functions generate error. leave boot here:
array version
$(function() { var k = 1; // create array store every created div in order var divs = new array(); // put first element of array divs[k - 1] = "cstep" + k; // each time a.step clicked ... $("#categories-picker").on("click", "a.step", function() { var id = $(this).attr('data-id'); var resp = $(this).attr('data-resp'); var count = $("#categories-picker > div").size(); var parent_id = $(this).closest("div").attr("id"); // remove elements array , remove divs view (var l = 0; l < divs.length; l++) { if (divs[l] == parent_id) { (var o = (l + 1); o < divs.length; o++) { $("#" + divs[o]).remove(); } divs.splice(l + 1, divs.length - (l + 1)); console.log(divs); } } $.ajax({ type: 'get', url: routing.generate('category_subcategories', {parent_id: id}), datatype: "json", success: function(data) { if (data.length != 0) { // add new div values after latest div $("#cstep" + k).after('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>'); var lis = ""; // move each json objects , build elements $.each(data, function(index, value) { $.each(value, function(i, v) { lis += '<li><a class="step" data-id="' + + '" href="#">' + v + '</a></li>'; }) }); // write html new div $('#step' + (k + 1)).html(lis); // push new created div id in array divs[k] = "cstep" + (k + 1); // increment k value next div k++; } else { $("#categories-picker").append('<button name="next_step" id="next_step"> continuar ...</button>'); } } }); }); }); jquery removeall() version
$(function() { var k = 1; // create array store every created div in order var divs = new array(); // put first element of array divs[k - 1] = "cstep" + k; // each time a.step clicked ... $("#categories-picker").on("click", "a.step", function() { var id = $(this).attr('data-id'); var resp = $(this).attr('data-resp'); var count = $("#categories-picker > div").size(); var parent_id = $(this).closest("div").attr("id"); // remove elements $(this).closest("div").attr("id").nextall().remove(); $.ajax({ type: 'get', url: routing.generate('category_subcategories', {parent_id: id}), datatype: "json", success: function(data) { if (data.length != 0) { // add new div values after latest div $("#cstep" + k).after('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>'); var lis = ""; // move each json objects , build elements $.each(data, function(index, value) { $.each(value, function(i, v) { lis += '<li><a class="step" data-id="' + + '" href="#">' + v + '</a></li>'; }) }); // write html new div $('#step' + (k + 1)).html(lis); // push new created div id in array divs[k] = "cstep" + (k + 1); // increment k value next div k++; } else { $("#categories-picker").append('<button name="next_step" id="next_step"> continuar ...</button>'); } } }); }); }); this error generated second one:
typeerror: $(...).closest(...).attr(...).nextall not function $(this).closest("div").attr("id").nextall().remove();
what i'm doing wrong? suggestions solve problem?
as mentioned in comment, using return value of attr() object when string value.
i got work using instead http://jsfiddle.net/tbcvx/:
$(this).closest("div[id]").nextall().remove(); div[id] matches div has id (regardless of id value).
i don't have routing component, dies @ point, items vanish when clicked.
please make corrections jsfiddle version others can play actual code.
Comments
Post a Comment