このHTMLでjQueryを使用して、クリックした以外のすべてのdivを削除しようとしています:
<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 and 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>
たとえば、上記のコードによれば、クリックすると次のものaが削除されます。要素をクリックすると、呼び出しからの新しい要素で再描画する必要があります。私はこのコードを書きましたが、すべての DIV を削除するため機能しませんが、それ以上作成することはできません。たとえば、 の任意の要素をクリックすると発生します。また、配列に基づく方法と、エラーを生成する jQuery 関数に基づく方法の 2 つの方法を試しました。ここにブートを残します：a#data-id=1div#cstep1div#cstep2div#cstep3a#data-id=3div#cstep3divs$.ajaxdiv#cstep1
アレイのバージョン
$(function() {
var k = 1;
// Create the array for store every created DIV in order to
var divs = new Array();
// Put the first element of the array
divs[k - 1] = "cstep" + k;
// Each time any a.step is 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 from the array and remove divs from view
for (var l = 0; l < divs.length; l++) {
if (divs[l] == parent_id) {
for (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 the new DIV with values after the latest DIV
$("#cstep" + k).after('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');
var LIs = "";
// Move for each JSON objects and build the elements
$.each(data, function(index, value) {
$.each(value, function(i, v) {
LIs += '<li><a class="step" data-id="' + i + '" href="#">' + v + '</a></li>';
})
});
// Write the HTML to the new DIV
$('#step' + (k + 1)).html(LIs);
// Push new created DIV id in the array
divs[k] = "cstep" + (k + 1);
// Increment k value for next DIV
k++;
} else {
$("#categories-picker").append('<button name="next_step" id="next_step"> Continuar ...</button>');
}
}
});
});
});
jQuery のremoveAll()バージョン
$(function() {
var k = 1;
// Create the array for store every created DIV in order to
var divs = new Array();
// Put the first element of the array
divs[k - 1] = "cstep" + k;
// Each time any a.step is 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 all 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 the new DIV with values after the latest DIV
$("#cstep" + k).after('<div class="product-left" id="cstep' + (k + 1) + '"><ul id="step' + (k + 1) + '"></ul></div>');
var LIs = "";
// Move for each JSON objects and build the elements
$.each(data, function(index, value) {
$.each(value, function(i, v) {
LIs += '<li><a class="step" data-id="' + i + '" href="#">' + v + '</a></li>';
})
});
// Write the HTML to the new DIV
$('#step' + (k + 1)).html(LIs);
// Push new created DIV id in the array
divs[k] = "cstep" + (k + 1);
// Increment k value for next DIV
k++;
} else {
$("#categories-picker").append('<button name="next_step" id="next_step"> Continuar ...</button>');
}
}
});
});
});
これは、2 番目のエラーによって生成されたエラーです。
TypeError: $(...).closest(...).attr(...).nextAll は関数 $(this).closest("div").attr("id").nextAll() ではありません。削除する（）;
私が間違っていることは何ですか？この問題を解決するための提案はありますか?