Dynamically delete new paragraph in html and js

To dynamically delete a new paragraph in HTML and JavaScript, you can use the remove() method in JavaScript to remove the paragraph element from the DOM.

Here is an example:

HTML:

<p id="myParagraph">This is a new paragraph</p>
<button id="deleteButton">Delete Paragraph</button>

JavaScript:

const deleteButton = document.getElementById('deleteButton');
const myParagraph = document.getElementById('myParagraph');

deleteButton.addEventListener('click', () => {
  myParagraph.remove();
});

In this example, we first get references to the paragraph element and the delete button using document.getElementById(). We then add an event listener to the delete button that listens for a click event. When the button is clicked, we call the remove() method on the paragraph element to remove it from the DOM.

You can also use innerHTML property to remove the paragraph, but it's not recommended as it will also remove any child elements of the paragraph.

myParagraph.innerHTML = '';

You can also use parentNode.removeChild() method to remove the paragraph element.

myParagraph.parentNode.removeChild(myParagraph);

You can also use a more modern way using querySelector and addEventListener

const deleteButton = document.querySelector('#deleteButton');
const myParagraph = document.querySelector('#myParagraph');

deleteButton.addEventListener('click', () => {
  myParagraph.remove();
});

You can also use a library like jQuery to make it easier to manipulate the DOM.

$('#deleteButton').on('click', function() {
  $('#myParagraph').remove();
});

Make sure to replace myParagraph and deleteButton with the actual IDs of your paragraph and button elements.