我正在尝试在此 HTML 中使用 jQuery 删除除单击的所有 div 之外的所有 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>
例如，根据上面的代码，如果我在then中单击任何a较少的内容，则应将其删除，如果单击，则应将next删除。现在，如果我单击任何元素，则应该使用来自调用的新元素重新绘制。我写了这段代码，但它不起作用，因为它删除了所有 DIV，但是我不能再创建了，当我单击例如任何元素时会发生这种情况。我也尝试了两种方法：一种基于数组，另一种基于 jQuery 函数，这会产生错误。我把引导放在这里：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>');
}
}
});
});
});
jQueryremoveAll()版本
$(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>');
}
}
});
});
});
这是第二个产生的错误：
TypeError: $(...).closest(...).attr(...).nextAll 不是函数 $(this).closest("div").attr("id").nextAll() 。消除（）;
我做错了什么？有什么建议可以解决这个问题吗？