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? — Heretic Monkey
– Heretic Monkey, Commented Feb 3, 2020 at 20:46

Scott Marcus · Accepted Answer · 2020-02-03 20:52:49Z

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 3, 2020 at 20:52

answered Feb 3, 2020 at 20:44

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Scott Marcus Over a year ago

@Max Updated. A null check really isn't needed. You just need to remove the handler in the handler.

Rawand Over a year ago

it worked, but is there any way to check if it has the next element sibling or not?

Scott Marcus Over a year ago

@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.

Rawand Over a year ago

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

Born Ready · Accepted Answer · 2020-02-03 20:45:18Z

0

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.

answered Feb 3, 2020 at 20:45

Born Ready

3,6963 gold badges30 silver badges31 bronze badges

Comments

Dhrumil Panchal · Accepted Answer · 2020-02-03 20:56:58Z

0

<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>

answered Feb 3, 2020 at 20:56

Dhrumil Panchal

4665 silver badges11 bronze badges

Comments

epascarello · Accepted Answer · 2020-02-03 21:04:03Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

How to remove an HTML element using JavaScript ?

Approach:

Exemple to remove a div :

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

How to remove an HTML element using JavaScript ?

Approach:

Exemple to remove a div :

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related