Вызов всех элементов массива [0,1,2,3] ПОМИМО указанного элемента [например. 3] с использованием индекса
Мне нужно удалить все кнопки, кроме той, на которую нажали (возможно, с помощью e.target.id?) — по ее индексу (с помощью for цикла.
Я попытался создать переменную и объявил ее let buttonsX = buttons[i], чтобы позже в операторе if ссылаться на нее как на !buttonsX, а затем она вызывала все кнопки массива, ЗА ИСКЛЮЧЕНИЕМ кнопки с текущим индексом (вызванной событием mousedown).
Но ничего не произошло.
Я читал, что есть функции pull() и splice(), но они просто потребуют ненужных строк кода, которые можно было бы предотвратить с помощью меньшего кода.
Кроме них - я не нашел в Интернете ресурсов о такой функции.
Кроме того, это должен быть чистый JavaScript,
Большое спасибо.
Внутри прослушивателя кликов вы можете получить ссылку на «кнопку, по которой только что нажали» по ключевому слову this или свойству event.target. Вы можете проверить свой массив кнопок, чтобы увидеть, равны ли они this, а если нет, скрыть их.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы можете просто использовать .filter() и проверить, отличаются ли элементы от тех, которые вас не интересуют:
let myArray = [...document.querySelectorAll(".container > button")];
console.info(myArray);
let filteredArray = myArray.filter(item => (item !== document.getElementById("btn-5")));
for (let element of filteredArray) {
element.style.backgroundColor = "green";
}<div class = "container">
<button id = "btn-1">1</button>
<button id = "btn-2">2</button>
<button id = "btn-3">3</button>
<button id = "btn-4">4</button>
<button id = "btn-5">5</button>
<button id = "btn-6">6</button>
<button id = "btn-7">7</button>
<button id = "btn-8">8</button>
<button id = "btn-9">9</button>
<button id = "btn-10">10</button>
<button id = "btn-11">11</button>
</div>Большое спасибо!! Он работает отлично!!
@StuckOverflow рад помочь
Чтобы выполнить эту задачу на чистом JS, вы можете использовать метод forEach для перебора всех кнопок и удаления тех, которые не были нажаты. Вы можете использовать e.target, чтобы получить кнопку, на которую нажали, а затем сравнить ее с каждой кнопкой в цикле.
document.addEventListener('DOMContentLoaded', () => {
const buttons = document.querySelectorAll('button');
buttons.forEach((button, index) => {
button.addEventListener('mousedown', (e) => {
buttons.forEach((btn, i) => {
if (i !== index) {
btn.remove();
}
});
});
});
});<!DOCTYPE HTML>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Remove Buttons Example</title>
</head>
<body>
<button id = "btn1">Button 1</button>
<button id = "btn2">Button 2</button>
<button id = "btn3">Button 3</button>
<button id = "btn4">Button 4</button>
</body>
</html>Надеюсь, это поможет.
Одним из способов достижения желаемого поведения является регистрация обработчика событий в элементе, обертывающем кнопки. Когда событие срабатывает, проверьте, нажата ли кнопка. Если пользователь не нажал кнопку, выйдите раньше. Если пользователь нажал кнопку, пройдите по всем кнопкам внутри контейнера и удалите их, за исключением случаев, когда кнопка соответствует нажатой кнопке.
for (const buttonContainer of document.querySelectorAll(".button-container")) {
buttonContainer.addEventListener("click", function (event) {
const path = getPath(this, event.target);
const clickedButton = path.find(elm => elm.matches(".button-container .removable-button"));
if (!clickedButton) return;
for (const removableButton of this.querySelectorAll(".removable-button")) {
if (removableButton === clickedButton) continue;
removableButton.remove();
}
});
}
/**
* Returns an array containing the element path
* to get from ancestor to target. Both ancestor
* and target are included within the array.
* If target is not present within ancestor
* undefined is returned instead.
*/
function getPath(ancestor, target) {
if (!ancestor || !target) return;
const currentPath = [];
while (target) {
currentPath.push(target);
if (target === ancestor) {
currentPath.reverse();
return currentPath;
}
target = target.parentElement;
}
}<div class = "button-container">
<button class = "removable-button">A</button>
<button class = "removable-button">B</button>
<button class = "removable-button">C</button>
</div>
<div class = "button-container">
<button class = "removable-button">D</button>
<button class = "removable-button">E</button>
<button class = "removable-button">F</button>
</div>const path = getPath(this, event.target);
const clickedButton = path.find(elm => elm.matches(".button-container .removable-button"));
Вышеупомянутое не является обязательным в текущем фрагменте и может быть заменено следующим:
const clickedButton = event.target;
Однако если вы планируете вложить в кнопку другие элементы, например <img>, <span>. Упрощенная версия больше не работает, поскольку event.target настроен на самый глубокий элемент, по которому щелкнули. Итак, если я нажму «текст» в <button><span>text</span></button>, то event.target будет элементом <span>, а не кнопкой.
Обратите внимание, что этот в обработчике событий — это элемент, к которому прикреплено событие. В данном случае контейнер кнопки <div> аналогичен event.currentTarget.
Можете ли вы добавить весь соответствующий HTML-код и код JS, который вы написали, в вопрос, чтобы мы могли видеть контекст, в котором вы работаете?