В настоящее время я делаю программу для моих игроков в ролевой игре, чтобы они могли выбирать навыки своих персонажей из раскрывающихся меню, которые будут 1. Отображать название навыка в разделе результатов, а также в разделе «Выбранные преимущества» ( в правом верхнем углу). 2. Отобразите описание навыка под его названием.
Мне удалось этого добиться, и теперь я хочу, чтобы пользователь мог нажимать кнопку рядом с каждым из перечисленных навыков в разделе «Выбранные преимущества» и удалите все записи для этого навыка. Я потратил часы, пытаясь понять это, но смог удалить только все записи, а не только желаемую.
Я пробовал использовать remove () и removeChild, назначая новые идентификаторы divs и многие другие попытки но никогда не получается, чтобы он работал. Любая помощь или совет будут очень благодарны.
let placeText = document.getElementById('place-text');
let selectedText = document.getElementById('selected-items');
//AAAAAAAAAA
document.getElementById("submit-advantage-a").addEventListener("click", function (e) {
e.preventDefault();
let userAdvantageA = document.getElementById('user-advantages-a').value;
let title = document.createElement('p');
let hr = document.createElement('hr');
let button = document.createElement('button');
if (userAdvantageA === 'absolute direction') {
placeText.append(hr);
placeText.append(title);
title.innerText = 'Absolute Direction';
placeText.innerHTML += Object.values(absoluteDirection);
selected.append('Absolute Direction');
selected.appendChild(button);
selected.append(hr);
} else if (userAdvantageA === 'absolute timing') {
placeText.append(hr);
placeText.append(title);
title.innerText = 'Absolute Timing';
placeText.innerHTML += Object.values(absoluteTiming);
selectedText.append('Absolute Timing');
selectedText.append(button);
selectedText.append(hr);
} else if (userAdvantageA === 'acute senses') {
placeText.append(hr);
placeText.append(title);
title.innerText = 'Acute Senses';
placeText.innerHTML += Object.values(acuteSenses);
selectedText.append('Acute Senses');
selectedText.append(button);
selectedText.append(hr);
}
});
//............A
let absoluteDirection = {
absoluteDirection: "Texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext",
};
let absoluteTiming = {
absoluteTiming: "Texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext"
};
let acuteSenses = {
description: 'Texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext'
};
#place-text p {
background-color: black;
color: white;
text-align: center;
font-size: large;
}
#selected {
background-color: gray;
color: white;
float: right;
text-align: center;
width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="GCRC.css"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>GCRC test</title>
</head>
<body>
<a href="/GCRC.html">Home</a>
<div id="selected"><strong>SELECTED ADVANTAGES</strong><hr>
<div id="selected-items"></div>
</div>
<header>
<h1>Advantages</h1>
</header>
<main>
<h3>A.</h3>
<form method="GET">
<select name="user-advantages-a" id="user-advantages-a">
<option value="absolute direction">Absolute Direction</option>
<option value="absolute timing">Absolute Timing</option>
<option value="acute senses">Acute Senses</option>
</select>
<input id="submit-advantage-a" type="submit"/>
</form>
<hr>
<h1>Results</h1>
<advantages>
<div id="place-text"></div>
</advantages>
</main>
<script type="text/javascript" src="GCRC.js"></script>
</body>
</html>