Develop Reference

how can i show an edit box on output text on click with save button

how can i edit on output text on click with save button. please if any could help....
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
$("#output").html($("#output").html() + " " + getVal + button);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<div id="output"></div>
</div>

$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
//let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
$("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
});
});
function Update(CurrentElement)
{
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
} else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
}
}
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}
tr:nth-child(even) { background-color: #dddddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>

May be this can help you.
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
$('#output').val(getVal);
});
$("#save").click(function(){
let getValNew = $("#output").val();
$('#inputValue').val(getValNew);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<input type="text" name="text-out" id="output">
<button id="save">Update value</button>
</div>

Clicking button to Dynamically add a field clears the already existing fields

Creating Dynamic new fields seems to clear the already existing fields
Also not trying to have multiple elements with the same id hence why i don't believe appendChild will work. Perhaps you can find a way to do that while creating different IDs?
Any help welcomed =)
var template;
var a = 1;
window.onload = function() {
template = document.querySelector("#wrapper").innerHTML;
document.querySelector("#more_fields").addEventListener("click", function(e) {
e.preventDefault(); // tell the browser to not send the form
document.getElementById('wrapper').innerHTML += template; // add next segment
document.querySelector("#wrapper > label:last-of-type").innerHTML = "Segment " + (++a) + ":";
});
}
.form-group {
display: inline
}
#wrapper > label {
margin: 0 0 10px 210px;
}
.segment {
display: inline-block;
margin: 0 0 1em
}
.form-group > label {
margin: 0 0 10px 20px;
}
.form-group > input {
width: 15%
}
<div class="container">
<h2>Form</h2>
<form>
<div id="room_fields">
<div class="content" id="wrapper">
<label style:>Segment 1:</label>
<div class="segment">
<div class="form-group">
<label>IN:</label>
<input name="seg-in[]" type="text">
</div>
<div class="form-group">
<label>OUT:</label>
<input name="seg-out[]" type="text">
</div>
<div class="form-group">
<label>Duration:</label>
<input name="seg-dur[]" type="text">
</div>
</div>
</div>
</div>
<br><br>
<div style="text-align: right;">
<button id="more_fields">+</button>
</div>
<br>
<br>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

innerHTML will not include the current value entered IIRC but it's still strange that doing += operation will remove the existing value.
However, insertAdjacentHTML() should work as expected.
var template;
var a = 1;
window.onload = function() {
template = document.querySelector("#wrapper").innerHTML;
document.querySelector("#more_fields").addEventListener("click", function(e) {
e.preventDefault(); // tell the browser to not send the form
document.getElementById('wrapper').insertAdjacentHTML('beforeend', template); // add next segment
document.querySelector("#wrapper > label:last-of-type").innerHTML = "Segment " + (++a) + ":";
});
}
.form-group {
display: inline
}
#wrapper > label {
margin: 0 0 10px 210px;
}
.segment {
display: inline-block;
margin: 0 0 1em
}
.form-group > label {
margin: 0 0 10px 20px;
}
.form-group > input {
width: 15%
}
<div class="container">
<h2>Form</h2>
<form>
<div id="room_fields">
<div class="content" id="wrapper">
<label style:>Segment 1:</label>
<div class="segment">
<div class="form-group">
<label>IN:</label>
<input name="seg-in[]" type="text">
</div>
<div class="form-group">
<label>OUT:</label>
<input name="seg-out[]" type="text">
</div>
<div class="form-group">
<label>Duration:</label>
<input name="seg-dur[]" type="text">
</div>
</div>
</div>
</div>
<br><br>
<div style="text-align: right;">
<button id="more_fields">+</button>
</div>
<br>
<br>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Basically, my below code is not 100% correct, you should alter it by yourself following mine.
In the HTML, you can define a hidden div which is your wrapper. In its and nested element ids, you can set a pattern like '$$$'.
<div class="content" id="wrapper$$$" sytle="visibility: hidden;">
<label style:>Segment 1:</label>
<div class="segment">
<div class="form-group">
<label>IN:</label>
<input name="seg-in[]" type="text">
</div>
<div class="form-group">
<label>OUT:</label>
<input name="seg-out[]" type="text">
</div>
<div class="form-group">
<label>Duration:</label>
<input name="seg-dur[]" type="text">
</div>
</div>
</div>
In your javascript, declare a global variable named index and replace index value with '$$$'. It will be increased 1 when you add your template dynamically.
template = document.querySelector("#wrapper").innerHTML;
template = template.replace('$$$', index);
index ++;
...

Problem:
The problem here is with using innerHTML, because innerHTML will always override the HTML of your elements so previously typed values will be cleared, that's why you should use .appendChild().
And your logic for dynamic is correct, you just need to chnage the way you add new fields.
Solution:
I tried to rewrite your code so it uses appendChild() in a smart way using the #wrapper innerHTML as template and updating the id dynamically in the new appended fields.
var template = document.querySelector("#wrapper").innerHTML;
function addFields() {
var wrapper = document.createElement("div");
wrapper.innerHTML = template;
wrapper.querySelector("label:last-of-type").innerHTML = "Segment " + (++a) + ":";
document.getElementById('wrapper').appendChild(wrapper);
}
This code will create a new div everytime, wher we put the template HTML inside it, update the label dynamically referring the label inside our current wrapper div using wrapper.querySelector("label:last-of-type"), then finally append this new div to our element.
Demo:
Here's a working Demo snippet:
var template = document.querySelector("#wrapper").innerHTML;
var a = 1;
function addFields() {
var wrapper = document.createElement("div");
wrapper.innerHTML = template;
wrapper.querySelector("label:last-of-type").innerHTML = "Segment " + (++a) + ":";
document.getElementById('wrapper').appendChild(wrapper);
}
window.onload = function() {
document.querySelector("#more_fields").addEventListener("click", function(e) {
e.preventDefault();
addFields();
});
}
<div class="container">
<h2>Form</h2>
<form>
<div id="room_fields">
<div class="content" id="wrapper">
<label style:>Segment 1:</label>
<div class="segment">
<div class="form-group">
<label>IN:</label>
<input name="seg-in[]" type="text">
</div>
<div class="form-group">
<label>OUT:</label>
<input name="seg-out[]" type="text">
</div>
<div class="form-group">
<label>Duration:</label>
<input name="seg-dur[]" type="text">
</div>
</div>
</div>
</div>
<br><br>
<div style="text-align: right;">
<button id="more_fields">+</button>
</div>
<br>
<br>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

JQuery todo list not running

I am working on a todo list where you type a task in a box and click the add button to enter the item into the list. However, nothing is getting added to my list, and I can't figure out what is wrong with my code.
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body background="css/fzm-notebook.texture-25.jpg" no-repeat;>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>
</body>
</html>

You can't have multiline strings in JS. You seem to know that, but you forgot to concatenate them with the plus sign. This is the problematic part:
$('.todo_list').prepend('<div class="todo">'
'<div>'
'<input type="checkbox" class="check_todo" name="check_todo"/>'
'</div>'
'<div class="todo_description">'
todoDescription
'</div>'
'</div>');
Just add a + to the end of each line except the last one.
Other than that, your code looks fine, let's try it:
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">' +
'<div>' +
'<input type="checkbox" class="check_todo" name="check_todo"/>' +
'</div>' +
'<div class="todo_description">' +
todoDescription +
'</div>' +
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
body {
font-family: kristen itc;
background-image="css/fzm-notebook.texture-25.jpg";
background-repeat: no-repeat;
background-size: cover;
}
.title {
text-align: center;
margin-top: 80px;
font-size: 40px;
}
.item {
font-size: 24px;
font-weight: bold;
cursor: pointer;
text-align: center;
}
.dashed{
font-size: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description"/>
<input type="submit" id="add_todo" value="Add"/>
</form>
</div>
</div>
<div class="todo_list">
</div>

I got it to work...
Here is your code modified :
<script>
$(document).ready( function() {
$('#add_todo').click( function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
</script>
I just deleted all quote on your html inside $('.todo_list').prepend('<div class="todo"><div><input type="checkbox" class="check_todo" name="check_todo"/></div><div class="todo_description">'+todoDescription+'</div></div>');
And add "+" around "todoDescription"
Hope this will help :)
EDIT
Forget to mention that i've deleted your action in your form...
<form id="todo_form" method="POST">

Check your console, you have forgotten all of the + needed to concactenate your html string:
$(document).ready(function() {
$('#add_todo').click(function() {
var todoDescription = $('#todo_description').val();
$('.todo_list').prepend('<div class="todo">'+
'<div>'+
'<input type="checkbox" class="check_todo" name="check_todo"/>'+
'</div>'+
'<div class="todo_description">'+
todoDescription +'</div>'+
'</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click(function() {
var todo = $(this).parent().parent();
todo.toggleClass('checked');
});
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Shopping List</h1>
<div class="enter_todo">
<form id="todo_form" action="index.html" method="POST">
<input type="text" size="55" id="todo_description" name="todo_description" />
</form>
<input type="button" id="add_todo" value="Add" />
</div>
</div>
<div class="todo_list">
</div>

As others have mentioned, you didn't concatenate the strings correctly.
Multiline strings and string interpolation can be used with template strings, introduced in ES6.
You could format the string in the following way using a template string :
`<div class="todo">
<div>
<input type="checkbox" class="check_todo" name="check_todo"/>
</div>
<div class="todo_description">
${todoDescription}
</div>
</div>`

How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?

I want to make a book catalog with JQuery to add books to a author. In the code That I have I am trying to add a author and have his books be in a array with his number only. Separated by other authors and their own arrays of books.
For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name.
When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author).
Also to add multiple books assigned to that author.
I have already done this in the pics but I get an array of everything. I want it to be separated by author.
author1 has an array of {book1, book2, book3...}
author2 has an array of {book13, book14, book15}
(i'm a beginner at JQuery)
This is the code that I have so far:
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<button class="add_author">Add Author</button>
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author" value="" id="author1" />
<br/>
<button class="add_book">Add book</button>
<div>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function($){
var wrapper = $(".all_fields"); //Fields wrapper
var commonPart = $("#commonPart");
var add_author = $(".add_author"); //Add button ID
var add_subButton = $(".add_book"); //Add sub button ID
$('.my-form .add-box').click(function(){
var n = $('.all_fields').length + 1;
if( 15 < n ) {
alert('Stop it!');
return false;
}
$(add_author).click(function(e){
e.preventDefault();
var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$(add_book).click(function(e){
e.preventDefault();
var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
htmlToAdd.hide();
$('.my-form p.all_fields:last').after(htmlToAdd);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>

updated code(fixed some bugs..), try this....
<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="my-form">
<button onclick="addAuthor()" >Add Author</button><br><br>
<div id="addAuth"></div>
<br><br>
<button onclick="submit()" >Submit</button>
</div>
<div id="result" ></div>
</div>
<script type="text/javascript">
var authors = 0;
function addAuthor(){
authors++;
var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />'
+'<button onclick="addMore(\'auth'+authors+'\')" >Add Book</button>'
+'</div>';
$("#addAuth").append(str);
}
var count=0;
function addMore(id){
count++;
var str = '<div id="bookDiv'+count+'">'
+'<input class="'+id+'" type="text" name="book'+id+'" />'
+'<span onclick="addMore(\''+id+'\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>'
+'<span onclick="removeDiv(\'bookDiv'+count+'\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>'
+'</div>';
$("#"+id).append(str);
}
function removeDiv(id){
var val = confirm("Are you sure ..?");
if(val){
$("#"+id).slideUp(function(){$("#"+id).remove();});
}
}
function submit(){
var arr = [];
for(i=1; i<=authors; i++){
var obj = {};
obj.name = $("#author"+i).val();
obj.books = [];
$(".auth"+i).each(function(){
var data = $(this).val();
obj.books.push(data);
});
arr.push(obj);
}
$("#result").html(JSON.stringify(arr));
}
</script>
</body>
</html>

Please try this code and include jquery min js :
<div class="my-form">
<form role="form" method="post">
<p class="all_fields">
<div id="commonPart" class="commonPart">
<label for="author1">Author <span class="author-number"></span></label>
<input type="text" name="author" value="" id="author1" />
<br/>
<div>
<label for="author1">book <span class="author-number"></span></label>
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
<button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
<script> function AddCustomMOre(){
$(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label> <input type="text" class="bookName" name="authBook[]"/></div> Remove</div>');
} </script>

You can try this....
<p class="all_fields">
<button class="add_author">Add Author</button>
<div class="commonPart">
<label for="author1">Author <span class="author-number">1</span></label>
<br/>
<input type="text" name="author1" value="" id="author1" />
<br/>
<button div-id="1" class="add_book">Add book</button>
<div id="books1">
<input type="text" class="bookName" name="authBook[]"/>
</div>
</div>
</p>
<script>
var c=1;
$(".add_author").on("click",function(){
c++;
$(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
});
$(".add_book").on("click",function(){
var id=$(this).attr("div-id");
$("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
});
</script>

jquery remove() with multiple form

I want to remove a single section in a form. I have multiple forms with the same sections. When I am in MyForm1 in Split3 and trigger the remove, only Split3 in MyForm1 should be removed not all.
Any suggestions using for example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> test</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<style type='text/css'>
form {
font-family: helvetica, arial, sans-serif;
font-size: 11px;
}
form div{
margin-bottom:10px;
}
form a {
font-size: 12px;
padding: 4px 10px;
border: 1px solid #444444;
background: #555555;
color:#f7f7f7;
text-decoration:none;
vertical-align: middle;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
$('form[name="inpForm"]').submit( function () {
var $form = $(this).closest("form");
alert($(this).find('input[name="FirstName"]').val());
alert("name of form: " + $form.attr('name'))
alert("div index: " + $(this).closest("div").attr('id'));
return false;
});
$('.removeSplit_2_').click(function(){
var numItems = $('div').length;
alert("Aantal div secties: "+ numItems);
$('div').each(function(){
var indexDiv = $(this).attr('id');
alert("div index: " + indexDiv); // or simple this.id
if (numItems == indexDiv) {
alert('Do your thing and remove the div section');
//$(this).remove();
}
});
});
$('.removeSplit_3_').click(function(){
var MijnID = this.id;
alert(MijnID);
var numItems = $('div').length;
alert("Aantal div secties: "+ numItems);
$('div').each(function(){
var indexDiv = $(this).attr('id');
alert("div index: " + indexDiv); // or simple this.id
if (numItems == indexDiv) {
alert('Do your thing and remove the div section');
//$(this).remove();
}
});
});
});//]]>
</script>
</head>
<body>
<form name = "MyForm1">
<div id="Split1">MyForm1 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm1 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_" ><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_" ><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm1 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
<form name = "MyForm2">
<div id="Split1">MyForm2 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm2 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm2 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
<form name = "MyForm3">
<div id="Split1">MyForm3 Split1
<input name="FirstName" type="text"/>
</div>
<div id="Split2">MyForm3 Split2
<div name="cButton_2_" id="cButton_2_" class="cButton_2_"><input name="FirstName" type="text"/></div>
<div name="xButton_2_" id="xButton_2_" class="xButton_2_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
<div id="Split3">MyForm3 Split3
<div name="cButton_3_" id="cButton_3_" class="cButton_3_"><input name="FirstName" type="text"/></div>
<div name="xButton_3_" id="xButton_3_" class="xButton_3_"><IMG SRC="./1x.gif" BORDER="0"></div>
</div>
</form>
</body>
</html>

So all you need to do is this:
$( "#Split3" ).remove();
It will grab the first id with the name "Split3" and remove it!
I hope thats what you are looking for.
JSBin: http://jsbin.com/kibipoxowa
Luca

Based on your comments, Try this:
$('.removeSplit_2_').click(function () {
var mySplit = $(this).closest('.Split_2_');
mySplit.remove();
});

$(document).on( "click", "a", function() {
$( this ).remove();
});
test this