I have this form ready to send links, images, and videos (youtube), but then adds that one of them is no longer possible to remove only refreshing the page. I wonder if you can help me create a button to delete every link, image and video added?
Thanks Here is a screen print would be like, example: << http://i42.servimg.com/u/f42/14/02/95/46/remove10.jpg
here is my form: http://jsfiddle.net/Aau5R/
I think code paste by Mahesh Thumar may be your answer. but, if you really want to put an img or button then it will not be helpful for you.
just click on the added div to remove that div..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page</title>
<script type="text/javascript" src="view.js"></script>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
var imgs_bbcode=''; var imgs_html=''; var youtube_html=''; var youtube_bbcode=''; var url_bbcode=''; var url_html='';
function QueryString(ID){
var URL = document.location.href;
if(URL.indexOf('?' + ID + '=')>-1){
var qString = URL.split('?');
var keyVal = qString[1].split('&');
for(var i=0;i<keyVal.length;i++){
if(keyVal[i].indexOf(ID + '=')==0){
var val = keyVal[i].split('=');
return val[1];
}
}
return "";
}
else
{
return "";
}
}
function val_element(id){ return jQuery('[name="element_'+ id +'"]').val();
}
function set_element(id,value){ return jQuery('[name="element_'+ id +'"]').val(value);
}
function imgs_add(){
imgs_bbcode += '<img src="'+ val_element('7') +'"width="125" height="125" class="downscreens">';
imgs_html += '<img src="'+ val_element('7') +'"width="125" height="125" class="downscreens">';
jQuery('#iev').html(imgs_html);
set_element('7','http://');
}
var i=0;
function url_add(){
i=i+1;
url_html = '';
url_bbcode += '\n\n<b>'+val_element('4_2')+'</b>\n[url='+ val_element('4_1') +']<img src="http://2.bp.blogspot.com/-zYBE4heCDlg/TVwpJUweF9I/AAAAAAAAAgU/eDDnsmpQj9I/s320/download-button.gif" class="downimg">[/url] ';
url_html += '<div id=div'+i+' ><hr><b>Link:</b> '+ val_element('4_1') +'<br><b>Descrição do Link:</b> '+ val_element('4_2')+'<hr><button value="delete" class="delete" id=div'+i+'/></div>';
jQuery('#uev').append(url_html);
set_element('4_1','http://');
set_element('4_2','');
43
}
$(".delete").live("click",function(){
var id = $(this).attr("id");
$("#"+id).remove();
});
function youtube_add() {
var url = val_element('8');
var youtube_id;
youtube_id = url.replace(/^[^v]+v.(.{11}).*/,"$1");
youtube_bbcode += '[youtube]'+ url +'[/youtube]\n';
youtube_html += '<img src="http://i1.ytimg.com/vi/'+ youtube_id +'/default.jpg" /> ';
jQuery('#yev').html(youtube_html);
set_element('8','http://');
}
function gerarf(){
jQuery('[name="message"]').val(
'\n' +val_element('5_0')+' '+val_element('5_1')+
'\n<center><img src="http://2.bp.blogspot.com/-zYBE4heCDlg/TVwpJUweF9I/AAAAAAAAAgU/eDDnsmpQj9I/s320/download-button.gif" class="imgscreens"></center> ' +
'\n[center]'+ imgs_bbcode +'[/center]' +
'\n' +
'\n<b>Videos do Youtube:</b> ' +
'\n[center]'+ youtube_bbcode +'[/center]' +
'\n' +
'\n'
);
jQuery('[name="f"]').val(QueryString("f"));
}
</script>
</head>
<br>
<!-- Links -->
<label class="description" for="element_4_1">Link: </label>
<input id="element_4_1" name="element_4_1" class="element text medium" type="text" maxlength="255" value="http://"/><img src="http://illiweb.com/fa/fdf3/plus10.png" style="cursor:pointer;" onclick="url_add();"/>
<label class="description" for="element_4_2">Description link: </label>
<input id="element_4_2" name="element_4_2" class="element text medium" type="text" maxlength="255" />
<label class="description" for="fev">send: </label>
<div id="uev"></div>
<!-- Imagens -->
<label class="description" for="element_7">Images: </label>
<div><input id="element_7" name="element_7" class="element text medium" type="text" maxlength="255" value="http://"/><img src="http://illiweb.com/fa/fdf3/plus10.png" style="cursor:pointer;" onclick="imgs_add();"/></div>
<label class="description" for="fev">send: </label>
<div id="iev">None<br>
<br></div>
<!-- vídeos -->
<label class="description" for="element_8">Youtube: </label>
<div> <input id="element_8" name="element_8" class="element text medium" type="text" maxlength="255" value="http://"/> <img src="http://illiweb.com/fa/fdf3/plus10.png" style="cursor:pointer;" onclick="youtube_add();"/>.</div>
<label class="description" for="yev">send: </label>
<div id="yev">none</div>
<input type="hidden" name="f" value="1" />
<input type="hidden" name="mode" value="newtopic" />
<input type="hidden" name="message" value="O script não enviou a mensagem" />
<!-- Pré Visualizar -->
<input type="submit" name="preview" class="button2" value="Pré-visualizar" onClick="gerarf()" />
<!-- Enviar -->
<input type="submit" class="form-submit-button" name="post" class="button2" value="Enviar" onClick="gerarf()"/>
</form>
</div>
</body>
</html>
try now the above code. I've putted the button you can go for img with same id and class.
