XQA
Back to Web Development
2026-04-017 min read

Delete (Web Development)

Learn Delete (Web Development) step by step with clear examples and exercises.

Title: Delete (Web Development) - A full guide to Deleting HTML Elements

Why This Matters

In web development, it's crucial to know how to manipulate and delete HTML elements dynamically using JavaScript. This skill is essential for creating interactive websites that respond to user actions, such as deleting a row from a table or removing an item from a list. Understanding the techniques for deleting HTML elements can also help you troubleshoot issues and improve your problem-solving skills during real-world projects.

Prerequisites

Before diving into this lesson, make sure you have a solid understanding of the following:

  • Basic HTML syntax and structure
  • CSS for styling HTML elements
  • JavaScript fundamentals (variables, functions, events)

Core Concept

To delete an HTML element using JavaScript, we can use the removeChild() method or the innerHTML property.

Using removeChild()

The removeChild() method allows you to remove a specified child node from the parent node. Here's how it works:

  1. First, identify the parent element that contains the child element you want to delete.
  2. Next, use the getElementById() method or another suitable method to get a reference to the child element you want to remove.
  3. Finally, call the removeChild() method on the parent node and pass in the child element as an argument.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delete HTML Element</title>
</head>
<body>
<button id="deleteButton">Delete Paragraph</button>
<p id="targetParagraph">This is a target paragraph.</p>

<script>
const deleteButton = document.getElementById('deleteButton');
const targetParagraph = document.getElementById('targetParagraph');

deleteButton.addEventListener('click', function() {
const parentNode = targetParagraph.parentNode;
parentNode.removeChild(targetParagraph);
});
</script>
</body>
</html>

In this example, when you click the "Delete Paragraph" button, the removeChild() method is called to delete the paragraph with the id "targetParagraph".

Using innerHTML

Another way to delete an HTML element is by manipulating the innerHTML property of the parent element. You can set the innerHTML property to an empty string ("") to remove all child elements of the parent node. Here's how it works:

  1. First, identify the parent element that contains the child element you want to delete.
  2. Next, access the innerHTML property of the parent element and assign it an empty string ("").

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delete HTML Element</title>
</head>
<body>
<button id="deleteButton">Delete Paragraph</button>
<p id="targetParagraph">This is a target paragraph.</p>

<script>
const deleteButton = document.getElementById('deleteButton');

deleteButton.addEventListener('click', function() {
const parentNode = document.getElementById('parentDiv');
parentNode.innerHTML = '';
});
</script>
</body>
</html>

In this example, when you click the "Delete Paragraph" button, the innerHTML property of the parent div is set to an empty string, which removes all child elements, including the target paragraph.

Using innerHTML with a specific element

If you want to remove only a specific child element using innerHTML, you can create a new HTML fragment containing all child elements except for the one you want to delete and then assign it back to the parent node's innerHTML. Here's how it works:

  1. First, identify the parent element that contains the child element you want to delete.
  2. Next, use the getElementById() method or another suitable method to get a reference to all child elements of the parent node except for the one you want to remove.
  3. Create a new HTML fragment (document.createDocumentFragment()) and append the remaining child elements to it.
  4. Finally, assign the new HTML fragment back to the innerHTML property of the parent node.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delete HTML Element</title>
</head>
<body>
<div id="parentDiv">
<p id="targetParagraph">This is a target paragraph.</p>
<p>Another paragraph.</p>
<p>Yet another paragraph.</p>
</div>

<button id="deleteButton">Delete Target Paragraph</button>

<script>
const deleteButton = document.getElementById('deleteButton');

deleteButton.addEventListener('click', function() {
const parentNode = document.getElementById('parentDiv');
const remainingChildren = parentNode.children[1]; // Get the second child (the one after targetParagraph)
const fragment = document.createDocumentFragment();

while (remainingChildren) {
fragment.appendChild(remainingChildren);
remainingChildren = remainingChildren.nextSibling;
}

parentNode.innerHTML = '';
parentNode.appendChild(fragment);
});
</script>
</body>
</html>

In this example, when you click the "Delete Target Paragraph" button, the target paragraph is removed by creating a new HTML fragment containing only the remaining child elements and assigning it back to the innerHTML property of the parent node.

Worked Example

Let's create an interactive web page that allows users to delete items from a list using JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Delete List Items</title>
<style>
ul { list-style: none; }
li { margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Delete List Items</h1>
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

<button id="deleteButton">Delete Selected Item</button>

<script>
const myList = document.getElementById('myList');
const deleteButton = document.getElementById('deleteButton');

let selectedItemIndex;

function selectItem(index) {
if (selectedItemIndex !== undefined) {
deselectItem();
}
selectedItemIndex = index;
myList.children[index].style.backgroundColor = 'yellow';
}

function deselectItem() {
myList.children[selectedItemIndex].style.backgroundColor = '';
selectedItemIndex = undefined;
}

deleteButton.addEventListener('click', function() {
if (selectedItemIndex !== undefined) {
const parentNode = myList.children[selectedItemIndex].parentNode;
parentNode.removeChild(myList.children[selectedItemIndex]);
deselectItem();
} else {
alert('Please select an item to delete.');
}
});

myList.addEventListener('click', function(event) {
if (event.target.tagName === 'LI') {
const index = Array.from(myList.children).indexOf(event.target);
if (selectedItemIndex !== undefined && selectedItemIndex !== index) {
deselectItem();
}
selectItem(index);
} else if (selectedItemIndex !== undefined) {
deselectItem();
}
});
</script>
</body>
</html>

In this example, users can click on list items to select them. When the "Delete Selected Item" button is clicked, the selected item is removed from the list. If no item is selected, an alert message is displayed.

Common Mistakes

  1. Forgetting to get a reference to the parent node: To remove a child element using removeChild(), you must first get a reference to the parent node.
  2. Not setting the innerHTML property to an empty string when removing all child elements: If you're using innerHTML to remove all child elements, make sure to set it to an empty string ("") instead of just null (null).
  3. Not handling cases where no item is selected: Make sure your code can handle situations where the user hasn't selected any item before attempting to delete one.
  4. Not deselecting previously selected items when a new item is clicked: If you allow users to select multiple items, make sure that previously selected items are deselected when a new one is clicked.
  5. Not accounting for edge cases: Be aware of potential edge cases, such as empty lists or lists with only one item, and make sure your code handles them appropriately.

Practice Questions

  1. Write JavaScript code to remove the first paragraph in a web page using removeChild().
  2. Write JavaScript code to remove all list items (`) from an unordered list () using innerHTML`.
  3. Write JavaScript code to create a dynamic form that allows users to add and delete input fields using buttons.
  4. Write JavaScript code to create a web page with a text area and a button. When the user clicks the button, remove all the lines in the text area that contain the word "example".
  5. Write JavaScript code to create a web page with a list of links (`` elements). When the user clicks on a link, remove the corresponding link from the list and refresh the page without navigating away from it.

FAQ

--

  1. Can I use jQuery to delete HTML elements?

Yes, you can use jQuery's remove() method or empty() method to delete HTML elements. The remove() method removes the specified elements from the DOM, while the empty() method removes all child nodes of the selected element.

  1. Is it better to use removeChild() or innerHTML to delete HTML elements?

Both methods have their uses and can be chosen based on your specific needs. The removeChild() method is useful when you want to remove a specific child node, while the innerHTML property is more convenient for removing all child nodes at once.

  1. Can I use JavaScript to delete HTML elements added by another script or framework?

Yes, as long as you have access to the DOM and can get a reference to the element you want to remove, you can delete it using any of the methods discussed in this lesson. However, be aware that some scripts or frameworks may add elements dynamically and restructure the DOM, so your code should be able to handle such changes.

  1. Can I use JavaScript to delete HTML elements added by user interaction?

Yes, you can use event listeners to detect when a user interacts with an element (such as clicking on it or submitting a form) and then remove the element using any of the methods discussed in this lesson. This is often used for creating interactive web applications.

Delete (Web Development) | Web Development | XQA Learn