0

我有一个示例代码

<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" />

如何解决？

4

4 回答 4

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){}
于 2012-04-19T02:37:24.930 回答
0

一些评论：

> 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){}  }

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

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

当你不想要一个 A 元素时，为什么要使用它？使用跨度并适当地设置它的样式（或者，天堂禁止，一个按钮）：

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

您可以通过使用 div 的 id 使函数更通用，这样您就不必在调用中传递它。然后，您可能只需将一个侦听器附加到一个祖先，该祖先查看点击的来源并从那里进行处理（即委托）。

于 2012-04-19T02:54:53.103 回答
0

如果我理解正确，并且看到您使用 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 不支持进行动态输入更改，例如$('<input>').attr({'type':'hidden'})

于 2012-04-19T02:44:56.603 回答
0

如果要检查对象是否存在，请不要将 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?
    }
于 2012-04-19T02:40:54.267 回答