Удаление HTML-элементов со значениями с помощью javascript

#javascript #html

#javascript #HTML

Вопрос:

Я пытаюсь удалить <select> ….</select> html-элемент со всеми его значениями (опция) при событии щелчка. Нравится

 <span>Span First</span>
<select>
<option>opt 01</option>
<option>opt 02</option>
</select>
<span>Span Second</span>
<select>
<option>opt 11</option>
<option>opt 12</option>
</select>

Хотите выводить так:

 Span First Span Second

Я использую код, подобный:

 <script>
function removeTags(str)
{
if ((str===null) || (str===''))
return false;
else
str = str.toString();
return str.replace( /(<([^>] )>)/ig, '');
}
document.write(removeTags('<html> Tutorix is <script> the best <body> e-learning platform'));;
</script>

Приведенный выше код работает нормально, но не может удалить значение внутри <option>opt ..</option>

Кто-нибудь может мне помочь, пожалуйста.

Ответ №1:

Удалите <select> элементы с .remove() помощью .

 document.querySelectorAll("select").forEach(el => el.remove());

 <span>Span First</span>
<select>
<option>opt 01</option>
<option>opt 02</option>
</select>
<span>Span Second</span>
<select>
<option>opt 11</option>
<option>opt 12</option>
</select>

1. Спасибо, Марк, у меня есть еще один вопрос, у меня есть html-код в моем текстовом поле 1. при нажатии кнопки я хочу проанализировать html-код из textbox1 и хочу показать вывод (Span First Span Second) в textbox2.

2. Вы задаете совершенно новый и совершенно отдельный вопрос. В вашем первоначальном вопросе нет ничего о текстовых полях. Вы можете рассмотреть возможность использования innerHTML ключевого слова javascript для решения вашей проблемы. Но если вы не можете понять это, я предлагаю создать новый вопрос.

Ответ №2:

Вы можете попробовать метод removeChild() от DOM для удаления элементов. Вы также можете использовать последний метод remove().

 Array
 .from(parentNode.querySelectorAll('sele 
 ct').forEach((elem) => {
       parentNode.removeChild[elem]
  })