We Keep Coding

Is there a way to delete this tabs after creating them using cloneNode() in vanilla javascript?

I am trying to create a function in my vanilla JavaScript to delete tabs created by using cloneNode(true). Below is what i have tried but its not just working.
I created a form with class named secondSectionEmail; at the click of the button (+), the form is duplicated using cloneNode(). Each form is carrying a (x) button which is supposed to delete a particular tab. How do I achieve this please?
<form class="secondSectionEmail">
<button id="closeBtn">x</button>
<input type="email" id="recipient" placeholder="Enter Recipient Email">
<input type="text" placeholder="Subject"><br>
<textarea type="text" placeholder="Enter Message"></textarea>
<div class="upload">
<input type="file" multiple>
<button>Send Mail</button>
</div>
</form>
<br>
<br>
<button type="submit" id="arrow">+</button>
<script>
//script to add new tab
let addbutton = document.getElementById("arrow");
var i = 0;
addbutton.addEventListener("click", function (e) {
e.preventDefault();
let boxes = document.querySelector(".secondSectionEmail");
let closeC = document.getElementById('closeBtn');
var clone = boxes.cloneNode(true);
i++;
clone.className=`secondSectionEmail${i}`;
clone.classList.add(`mydiv`);
closeC.classList.add(`timzy${i}`);
boxes.after(clone);
})
//Script to delete tab
let deleteButton = document.querySelector(`.container`)
deleteButton.addEventListener("click", function (event) {
event.preventDefault()
var del = event.target.parentElement.className;
let newDel = document.getElementsByClassName(`${del}`);
let newDelete = Array.from(newDel)
console.log(newDelete)
})
</script>

Check the snippet below for solution to my question. I solved it two days after posting the question and i feel someone else might need the solution.
Solution:
else if(btnTarget==="closeBtn") {
wholeSection.parentElement.removeChild(wholeSection);
}

Display input value in a button

I have an input field and a button next to it, what i want to do is whatever i type in the input field then click on the button next to it, the result gets displayed in another button, here is what i tried so far:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
document.getElementById("btnresult").value = result;
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>

https://jsfiddle.net/sheriffderek/p2LoLcv3/
I think this is what you are describing...
Some simplified markup
<div class="parent">
<input type='button' value='Add' rel='action' /><br>
<input type='text' rel='text-input' />
</div>
<ul class='button-list' rel='button-list'>
<!-- you need to put the buttons somewhere, right? -->
</ul>
jQuery was one of the tags, so I used it
// just caching some thing that will be reused (I like using rel)
var $parent = $('.parent'); // whatever - to keep some scope
var $addButton = $parent.find('[rel="action"]');
var $textInput = $parent.find('[rel="text-input"]');
var $buttonList = $('[rel="button-list"]');
$addButton.on('click', function() { // on click...
var currentInputValue = $textInput.val(); // get the value from input...
$buttonList.append('<li><button>' + currentInputValue + '</button></li>'); // append a new button...
$textInput.val(''); // clear input
});

You're almost there, you have to unhide the button you've hidden in the first place, and not set a value for a button, but rather the innerHTML property. Since a button doesn't hold a value, but displays the content between the tags as text.
I've commented my changes:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
// Changed from .value to .innerHTML
document.getElementById("btnresult").innerHTML = result;
// Changed style from to 'block'
document.getElementById("btnresult").style.display = "block"
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>
In addition, there are several aspects of your code that could use improvement, I described them below:
function add_keyword() {
// No need for parentheses around the document.getElement function.
var keyword_value = document.getElementById("keyword").value;
// There's no need to place the value in a new variable, it is useful to place the element you wish to replace in a variable, since we'll be re-using it's instance.
var btn = document.getElementById("btnresult");
btn.innerHTML = keyword_value;
btn.style.display = "block"
}
EDIT: Since OP's goal was to create a new button with the content, this is an updated version that generates a new button for every new input.
function add_keyword() {
var keyword_value = document.getElementById("keyword").value;
// Create a new button element.
var btn = document.createElement("button");
// Set it's content to the keyword from the input.
btn.innerHTML = keyword_value
// Append it to the body.
document.body.appendChild(btn);
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>

Restoring placeholder value to a search box after reset has been clicked

I am editing some javascript that has a search box with a variable as follows
var secondSearchTerm = $('#2nd-search').val();
In the HTML code '2nd-search' has a placeholder 'Enter search term'
I also have a reset button that clears the search as follows:
$("#2nd-reset-btn").on("click", function () {
return myNetwork.resetSecondSearch();
})
What I would like to do is to get the search box to re-populate with the placeholder when reset is clicked. Right now the last entered term remains in the search box.
Any ideas on how I can edit the code to do this?
Many thanks!

hi refer this link https://plnkr.co/edit/EtLmby5BdD5Yn70EIBRD?p=preview
js
// Add your javascript here
$(function(){
$("#reset").on("click", function () {
return $('#username').val('');
});
});
html
<input type="text" name="name" id = "username" placeholder="uname"/>
<button id="reset">Reset </button>

All you need to do is set the value to blank & take the focus away from the input(As some browsers hide placeholder on focus). The placeholder will be visible again. Try the following:
$("#2nd-reset-btn").on("click", function () {
secondSearchTerm.blur();
return secondSearchTerm.val('');
})

You can do it with pure JS only
Given the initial value
function reset() {
var initialValue = 'Enter your search term.';
var query = document.getElementById('myquery');
query.value = initialValue;
}
<input type="text" id="myquery" />
<input type="button" id="reset" onclick="reset()" value="Reset" />
Given the placeholder
function reset() {
var query = document.getElementById('myquery');
query.value = '';
}
HTML
<input type="text" id="myquery" />
<input type="button" id="reset" onclick="reset()" value="Reset" />

onclick function with iframes

i have this in left frame and i want the result in other frame and i tried a lot but nothing work for me , any help with that?
<script type="text/javascript">
function goToPage() {
var page = document.getElementById('datepicker').value;
window.location = "http://example.com";
}
</script>
<p><b><font color="#FF0000" size="4">Date:</font></b>
<input type="text" id="datepicker" size="20" name="datepicker" value="Date Field" maxlength="8"><input type="submit" value="submit" onclick="goToPage();" /></a></p>

You need a reference to the iframe where you want to load the url.
Assuming your target iframe id is 'targetIframe' and that jQuery is loaded on all iframes, you could do this from another iframe:
var iframe = window.top.$('#targetIframe');
iframe.attr('src', url);
You could also do:
iframe.contentWindow.location = url;

pass url stored as string in variable to form's onsubmit

how can i make a form tag using onsubmit (that executes upon hitting enter) which opens a target window with a given url in a string variable form?
what i have so far:
<div id="row2">
<!-- Intranet Search -->
<form action="" onSubmit="urlGen(this);" method="get" target="_blank">
<input type="text" id="intranet" size="15" value="Search Intranet.."
onFocus="this.value = ''"
onBlur="this.value = 'Search Intranet..'" / >
</form>
<script language="javascript" type="text/javascript">
function urlGen(f)
{
var i1 = "seg1";
var i2 = f.intranet.value;
var i3 = "seg3";
var fullURL = i1 + i2 + i3;
f.action = i1 + i2 + i3;
//document.write(fullURL);
return true;
}
</script>
<br><br>
<a href="javascript: void(0)" onClick="urlGen();" target="_blank">
<div id="submit" class="out"
onMouseOver="document.getElementById('submit').className = 'over';"
onMouseOut="document.getElementById('submit').className = 'out';">
<span>Submit</span>
</div>
</a>
</div>
edit: still havent solved this; any help from someone more experienced with javascript would be greatly appreciated!

You need to give your <input> element a "name" value:
<input type="text" name="intranet" id="intranet" size="15" ...
Alternatively, your Javascript code could use document.getElementById("intranet") to get a reference to the input element.
Also, though this isn't directly relevant, putting a <div> inside an <a> tag is not valid markup.