无法创建输入时使用javascript

Question

数据空我有一个示例代码

<script type="text/javascript"> 
function remove_news(id) { 
    try { 
     $('news_list').removeChild($('news_'+id)); 
     $('news_list').removeChild($('input_news_'+id)); 
     if($('news_list') == '') { 
      var input = document.createElement('input'); 
      input.setAttribute("type", "hidden"); 
      input.setAttribute("name", "news_id"); 
      input.setAttribute("value", "0"); 
      document.getElementById("news_list").appendChild(input); 
     } 
    } catch(err){} 
} 
</script> 
<div id="news_list"> 
<div id='news_1'> News no 1 <a href='#' onclick='remove_news(1); return false;'>[Delete]</a></div> 
<input type="hidden" id="input_news_1" name="news_id" value="1" /> 
</div> 

当我运行的代码，选择删除链接结果没有显示<input type="hidden" name="news_id" value="0" />

如何解决呢？

Answer 1

您需要使用#news_id等作为jQuery选择与#：

try { 
    $('#news_list').removeChild($('#news_'+id)); 
    $('#news_list').removeChild($('#input_news_'+id)); 
    if($('#news_list').html() == '') { 
     var input = document.createElement('input'); 
     input.setAttribute("type", "hidden"); 
     input.setAttribute("name", "news_id"); 
     input.setAttribute("value", "0"); 
     document.getElementById("news_list").appendChild(input); 
    } 
} catch(err){} 

不过，你不用混合jQuery和常规的JavaScript。既然你使用的是jQuery，那么你也可以使用所有的jQuery。我不保证上述内容甚至可以工作。

try { 
    // Instead of removing a child node, just remove the element directly: 
    $('#news_'+id).remove() 
    $('#input_news_'+id).remove(); 
    if($('#news_list').html() == '') { 
     var input = $.create("<input type='hidden' name='news_id' value='0'>"); 
     $('#news_list').append(input); 
    } 
} catch(err){} 

Answer 2

如果要检查对象是否存在，不jQuery对象比较空字符串。

if($('news_list') == '') { ...} 

检查非零长度。正如别人提到的，它看起来像缺少哈希来识别你的元素。

if($('#news_list').length == 0) { ...} 

此外，这个if语句中的逻辑似乎有缺陷。你检查是否有news_list在那里，但是然后你尝试在最后一行中通过同一个id获得一个元素。很难说，因为正如我所提到的，你是用一个字符串来查询一个对象。这没有意义。

if($('news_list') == '') { 
     var input = document.createElement('input'); 
     input.setAttribute("type", "hidden"); 
     input.setAttribute("name", "news_id"); 
     input.setAttribute("value", "0"); 
     document.getElementById("news_list").appendChild(input); //doesn't exist? 
    } 

Answer 3

，如果我理解正确，看到你使用jQuery：

function remove_news(id) { 
    var newsList = $('#news_list');   //cache news list 

    $('#news_'+id,newsList).remove();  //then remove the news 
    $('#input_news_'+id,newsList).remove(); //as well as the accompanying input 

    if(newsList.length){     //and if there is no news left 
     $('<input type="hidden">').attr({ //create a hidden input 
      'name':'news_id',    
      'value':'0' 
     }).appendTo(newsList);    //and append to list 
    } 
} 

的$('<input type="hidden">')的解释是，IE does not support doing dynamic input changing像$('<input>').attr({'type':'hidden'})

Answer 4

一些评论：

> function remove_news(id) { 
>  try { 

有绝对不需要try..catch在这里。代码防守，而不是填充单元格。

>   $('news_list').removeChild($('news_'+id)); 
>   $('news_list').removeChild($('input_news_'+id)); 

你似乎jQuery和普通的JavaScript之间发生冲突，所以：

var news_list = document.getElementById('news_' + id); 
    news_list && news_list.parentNode.removeChild(news_list); 

    var input_news_list = document.getElementById('input_news_' + id); 
    input_news_list && input_news_list.parentNode.removeChild(input_news_list); 

> 
>   if($('news_list') == '') { 

你只是删除从DOM该元素，所以你不会找到它。将它与一个空字符串比较也是一个糟糕的选择，我认为这是一个测试，看看元素是否在文档中。由于它是不必要的，它可以被删除。

>    var input = document.createElement('input'); 
>    input.setAttribute("type", "hidden"); 
>    input.setAttribute("name", "news_id"); 
>    input.setAttribute("value", "0"); 

为什么所有这一切，如果所有同比想要做的是明确的价值？总之，简单直接沟的setAttribute调用和刚刚成立的属性：

var input = document.createElement('input'); 
    input.type = 'hidden'; 
    input.name = 'news_id'; 
    input.value = '0'; 

>    document.getElementById("news_list").appendChild(input); 
>   }  
>  } catch(err){} } 

小时的HTML（我的包装为方便起见）：

> <div id='news_1'> News no 1 <a href='#' onclick='remove_news(1); 
> return false;'>[Delete]</a></div> 

为什么要使用一个元素，当你不想要一个？使用范围，并适当设置样式（或，但愿，一个按钮）：

<div ...><span onclick="remove_news(1);">...</span></div> 

可以使功能更通用的使用div的ID，所以你不要ahve它通过呼叫。然后，你可能只需要将一个监听器附加到一个祖先，该祖先可以看到点击来自哪里，然后从那里开始工作（即委托）。