Home > Article > Web Front-end > How to delete text in JavaScript

How to delete text in JavaScript

PHPzOriginal: 2023-04-24 10:50:271167browse

With the continuous development of Internet technology, JavaScript has become one of the core languages for more and more websites and applications. In the process of web development, it is often necessary to add, delete, modify and check elements on the page. This article will focus on how to remove text using JavaScript.

Delete text nodes

Deleting text nodes is one of the most basic ways to delete text in JavaScript. Text nodes refer to plain text content within HTML elements that do not contain any tags. For example, "Hello World" in the following HTML code is a text node:

<p>Hello World</p>

The code to delete the text node using JavaScript is as follows:

var node = document.getElementsByTagName("p")[0];
node.removeChild(node.firstChild);

This code first obtains the first one in the page  tag element, and then delete the first child node of the element, which is the text node "Hello World". It should be noted that if there are multiple text nodes in the element, they can all be deleted by looping through.

Delete HTML elements

If you want to delete the HTML element itself that contains the text node, you need to use another method of JavaScript - delete HTML elements. For example, the  tag and the text nodes it contains in the following HTML code will be deleted together:

<div>
  <p>Hello World</p>

The JavaScript code to delete the HTML element is as follows:

var node = document.getElementsByTagName("div")[0];
var childNode = node.getElementsByTagName("p")[0];
node.removeChild(childNode);

This code first obtains the <div> tag element, then obtains the first  tag element in the element, and finally deletes it. Similarly, if there are multiple text nodes and sub-elements in the HTML element, you can delete them all by looping through them.

Delete the content of the input box

In addition to deleting the static text in the page, JavaScript can also be used to delete the content of the input box. For example, the input box in the following HTML code:

<input type="text" id="input-box">

To delete the content in the input box, you can use the following JavaScript code:

var inputBox = document.getElementById("input-box");
inputBox.value = "";

This code first obtains the input box element, and then Set its value attribute to an empty string, which deletes the content in the input box.

Remove drop-down list options

If a website or application requires a drop-down list to select options, sometimes it will be necessary to dynamically add or remove options. To remove an option from a drop-down list, you can use the following JavaScript code:

var selectBox = document.getElementById("select-box");
selectBox.removeChild(selectBox.options[index]);

This code first obtains the drop-down list element, and then calls its removeChild() method to delete the option at the specified position. Among them, the index parameter specifies the index value of the option to be deleted. For example, if you wish to remove the second option, you can set index to 1.

Summary

This article introduces the method of deleting text nodes, HTML elements, input box contents and drop-down list options in JavaScript. These operations are often used in the web development process. Mastering these techniques can make code work more efficient and flexible. Of course, you need to carefully check the relevant code before operation to avoid accidentally deleting other content and causing unnecessary trouble. Be sure to fully test the functionality of your code to ensure it works properly.

The above is the detailed content of How to delete text in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 字符串循环

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to change pictures with javascriptNext article：How to change pictures with javascript

See more

How to delete text in JavaScript

Related articles