Question

如何在 JS 中添加一个按钮来删除元素？

2011-09-10

148

javascript jquery

我已准备好此表单以发送链接、图片和视频（youtube），但随后又说，其中一个无法再删除，只能刷新页面。我想知道您是否可以帮我创建一个按钮来删除添加的每个链接、图片和视频？

谢谢以下是屏幕截图，例如：<< http://i42.servimg.com/u/f42/14/02/95/46/remove10.jpg

以下是我的表单： http://jsfiddle.net/Aau5R/

Answer 1

我认为 Mahesh Thumar 的代码粘贴可能是您的答案。但是，如果您真的想放置一个图片或按钮，那么它对您没有帮助。

Answer 2

只需单击添加的 div 即可删除该 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>

Answer 3

现在尝试上面的代码。我已放置按钮，您可以使用相同的 id 和 class 获取 img。

Mahesh Thumar

2011-09-10