We Keep Coding

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

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

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>

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.

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

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>

Check if text exist in div using jquery

I would like to check if the text exist in the div element, so that if text matches the text in div it will alert "hello". May I know how am I able to achieve this result? Thank you.
<script type="text/javascript">
jQuery(document).ready(function(){
var text = "div[style*=\"width: 550px;\"]";
if (#content.indexOf(text) > -1){
alert("Hello");
}
});
</script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>

Here you go with a solution https://jsfiddle.net/9kLnvyqm/
if($('#content').text().length > 0) { // Checking the text inside a div
// Condition to check the text match
if($('#content').text().indexOf('Amy')){
console.log('Hello');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
If you want only the text content from a container then use text(), if you are looking for html content then use html().
Hope this will help you.

It is possible to get the value of inline style of an element.
var wid = $("#content > div")[0].style.width;
if(wid === "550px"){
//correct width detected. you can use alert instead of console.log
console.log("hello");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div style="width:550px;">James</div>
<div style="width:500px;">Amy</div>
</div>
You have multiple elements inside #content. you may want to use the return value of
$('#content').children().length;
and loop the program to get inline width of all elements. Ping if you need some help with the loop

Javascript Hide/Show div not working

im having trouble running javascript hide/show div using CSS classes, when i click on the trigger nothing happens. The relevant codes are the following:
HTML
Click
<div id="test" class="hidden">
test
</div>
CSS
.hidden{
display:none;
}
JS
function toggleClass(eid, myclass) {
var theEle = document.getElementById(eid);
var eClass = theEle.className;
if (eClass.indexOf(myclass) >= 0) {
theEle.className = eClass.replace(myclass, "");
} else{
theEle.className += "" +myclass;
}
}

two issues: you missed a "#" for the href + ' for the test and hidden (must be strings):
Click
<div id="test" class="hidden">
test
</div>

im not 100% certain, but im pretty sure you need to enclose the arguments in quotation marks
Click
<div id="test" class="hidden">
test
</div>

click on image and change a text

U have 2 images on a page and a textbox (php)
When u click on the image i want to change the text.
I am a starter, please sent a code that isn't to hard to understand.
<body>
<img src="bier1.jpg" alt="u mad" onclick= "">
<img src="bier2.jpg" alt="u mad" onclick= ""><br>
<form>
<input type="text" name="Example"/>
</form>
</body>

Are I'm right that you want to change the text of the Textbox? If yes here's the code:
<body>
<img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
<img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>
<form>
<input type="text" name="Example"/>
</form>
</body>

You'll need to use Javascript, I prefer to give javascript code using jQuery, so please do a quick Google search on jQuery.
<script type="text/javascript">
$(function(){
//You need to bind click events to your images and probably
$("img.has-message").click(function(){
var msg = $(this).attr("data-msg");
//get the message from that particular image
$("#text_box_id").attr("value",msg);
//changes the value of the text box to display the message
return false;
});
});
</script>
So you place this code in the <head></head> tag of your page
This code will work perfectly assuming you could change your HTML to look like so:
<body>
<img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
<img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
<form>
<input type="text" id="text_box_id" name="Example"/>
</form>
</body>
Please remember that jQuery needs to have been included on your page for the above to work.

You need to first add id to the text field:
<input type="text" name="Example" id="myTextBox" />
Then you can do such thing:
<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
This is not very elegant though, you have it applied to all images without having to change the markup, have such JavaScript:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
document.images[i].onclick = function() {
oTextbox.value = this.alt;
};
}
};
Live test case of above code.
You can also have the above code work only for certain images by applying a class to those images you want "clickable", for example:
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />
To have only the second cause the textbox to change, have such code:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
image.onclick = function() {
oTextbox.value = this.alt;
};
}
}
};​
Updated fiddle to demonstrate.

I am guessing they mean the page is served as a php page. I would do this purely in javascript. In pseudo code I would do the following.
Create function in javascript
Function looks up input using name
Function sets the text of the input to whatever you like (this could be based on which image was clicked
Id deffinately suggest looking at w3schools website which will give you lots of simple examples to get you started.
Also start basic and work your way up, if you cant get it all working at once, do it bit by bit, get your onclick to alert when you click it, then try setting the text once you knwo your onclicks are working.

Javascript change div content upon a click

I'm pulling a content from PHP array and I have a situation like this:
<div class="weight-display">
<span>04/25/2011</span> <span>100lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc...
Now when somebody clicks on Edit within, let's say, first div where weight is 100lbs, I just need that "div" to change and to have input field instead of simple text where weight is (while others will remain the same) and to be like this:
<div class="weight-display">
<span>04/25/2011</span> <input type="text" value="100" /> <span>Save</span> <span>Cancel</span>
</div>
<div class="weight-display">
<span>04/27/2011</span> <span>150lbs</span> <span>Edit</span> <a href="http://foo.com">Delete</span>
</div>
etc..
So basically div has to "reload itself" and change content. Now I really need some very simple Javascript solution. Preferably I would like a solution with a hidden div beneath original one, so they just swap places when user clicks on EDIT and in a case if CANCEL is pressed to swap places again so original div with text is displayed...
Thanks,
Peter

<style type="text/css">
/* Normal mode */
.weight-display div.edit {display:none}
/* Editor mode */
.weight-edit div.show {display:none}
</style>
<div class="weight-display">
<button onclick="toggle(this)">Edit this!</button>
<div class="edit"><input type="text" value="Test" /></div>
<div class="show">Test</div>
</div>
<script type="text/javascript">
function toggle(button)
{
// Change the button caption
button.innerHTML = button.innerHTML=='Edit this!' ? 'Cancel' : 'Edit this!';
// Change the parent div's CSS class
var div = button.parentNode;
div.className = div.className=='weight-display' ? 'weight-edit' : 'weight-display';
}
</script>

What you suggest is basically correct. I would generate two div's one for display and one edit. The edit div will initially have display: none. When the Edit is clicked, hide the display div and show the edit div.

How about something like:
onClick event calls a function (EDITED to be a little smarter than my original brute force method):
function swapdivs ( id_of_topdiv, id_of_bottomdiv ) {
var topdiv = getRefToDiv( id_of_topdiv );
var bottomdiv = getRefToDiv( id_of_bottomdiv );
var temp = topdiv.style.zIndex;
topdiv = bottomdiv.style.zIndex;
bottomdiv = temp.style.zIndex;
}
Could that or similar work for you? Or am I missing some subtle yet crucial requirement?