can I remove a line in my HTML code with javascript?

Question

I have this code:

<div class="input">
    <input type="number" id="myID" oninput="myFunction()">
    <div>
        <h3>MY TEXT</h3>
    </div>
</div>

and I want to make a javascript code to remove the div below the input field whenever I write anything in the input

.......... I tried this code:

function myFunction(){
  var field = document.getElementById("myID");
  var num = field.value;
  var parent = field.parentNode;
  parent.innerHTML = field.outerHTML;
  field.value = num;
}

but it have a problem each time I make an input, I have to re-click inside the input to make it active again

check out the code here

Does this answer your question? [How to remove an HTML element using Javascript?](https://stackoverflow.com/questions/5933157/how-to-remove-an-html-element-using-javascript) — Heretic Monkey, Feb 03 '20 at 20:46

Scott Marcus · Accepted Answer · 2020-02-03T20:52:49.133

2

You should not use inline HTML event attributes to wire up event handlers. That technique is 25+ years old and will not die the death it deserves because people just keep copying it from other code they've seen.

See the comments for the simple explanation:

// Add the event handler to the input in JavaScript, not in HTML
document.getElementById("myID").addEventListener("input", removeElement);

function removeElement(){
  // Remove the sibling element that follows the input
  document.querySelector("#myID").nextElementSibling.remove();
  
  // Now that the element has been removed, this function is no
  // longer required, so remove the event handler to prevent attempts
  // to remove it again when it's no longer there. "this" refers to 
  // the object that caused this function to be invoked (the input
  // element in this case).
  this.removeEventListener("input", removeElement);
}

<div class="input">
    <input type="number" id="myID">
    <div>
        <h3>MY TEXT</h3>
    </div>
</div>

edited Feb 03 '20 at 20:52

answered Feb 03 '20 at 20:44

Scott Marcus

64,069
6
49
71

@Max Updated. A null check really isn't needed. You just need to remove the handler in the handler. – Scott Marcus Feb 03 '20 at 20:49
it worked, but is there any way to check if it has the next element sibling or not? – Rawand Feb 03 '20 at 20:52
@Rawand Yes, it would be `if(document.getElementById("myID")){...}`, but that isn't really needed if the page always starts out with the `div` present. – Scott Marcus Feb 03 '20 at 20:53
no, it won't start with the div, another function creates it, and if it happened before writing in this one, i want to remove it, but this null wont let the codes after it run – Rawand Feb 03 '20 at 21:02

score 0 · Answer 2 · answered Feb 03 '20 at 20:45

How to remove an HTML element using JavaScript ?

Given an HTML element and the task is to remove the HTML element from the document using JavaScript.

Approach:

Select the HTML element which need to remove.
Use JavaScript remove() and removeChild() method to remove the element from the HTML document.

Exemple to remove a div :

div.parentNode.removeChild(div);

Follow this link for more information.

I hope I was able to help you.

score 0 · Answer 3 · answered Feb 03 '20 at 20:56

<div class="input">
    <input type="number" id="myID" >
    <div id="id2">
        <h3>MY TEXT</h3>
    </div>
</div>

<script>
document.getElementById("myID").oninput = function() {myFunction()};
function myFunction() {
  document.getElementById("id2").innerHTML="";
}

</script>

epascarello · Answer 4 · 2020-02-03T21:04:03.000

Problem with using innerHTML is you are basically using a whiteboard. You erase everything on it and you have to redraw it all. That means you would need to reset the value and focus. It is doable, just not practical.

The better thing to do would be to select the element and remove it with .remove()

var field = document.getElementById("myID");
var num = field.value;
if (num.length) {
  field.nextElementSibling.remove()
}

It will work, but you will be better off using a class to hide the element. It also has the benefit that if the user deletes the text in the input, you can reshow the message. I would just hide it with a css class with toggle. I would select the div with nextElementSibling.

function myFunction(){
  var field = document.getElementById("myID");
  var num = field.value;
  field.nextElementSibling.classList.toggle('hidden', num.length)
}

.hidden {
  display: none;
}

<div class="input">
    <input type="number" id="myID" oninput="myFunction()">
    <div>
        <h3>MY TEXT</h3>
    </div>
</div>

can I remove a line in my HTML code with javascript?

4 Answers4

How to remove an HTML element using JavaScript ?

Approach:

Exemple to remove a div :