無法創建輸入時使用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它通過呼叫。然後，你可能只需要將一個監聽器附加到一個祖先，該祖先可以看到點擊來自哪裏，然後從那裏開始工作（即委託）。