Question

我正在尝试实现一个按钮，该按钮将从用户选定的一组事件中删除事件。对于故障排除现在我在页面中有5个硬编码的事件，但最终它们是从localStorage调用的。删除按钮应该从localStorage和页面中删除元素。我的问题是，如果没有按顺序单击“删除”按钮，则会抛出错误。任何和所有的帮助表示赞赏。要查看错误，请打开控制台。这是一个小提琴：http://jsfiddle.net/roob/65j6ktnL/

这是代码的缩写版本：

<div id="result">
    <div class="10am target-stage stage-only saturday  eventer" id="row0" rel="0">
        <table  border="0" cellspacing="0" cellpadding="0" style="border:none;">    
            <tr>
                <td valign="top" align="left" class="ev-time" style="border:none;">10:30 a.m.</td>
                <td valign="top" class="ev-desc">
                <span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children&rsquo;s Stage</b></span><br /><span class="ev-signings">Signing Area 1</span></p></span>
                <span class="info-body"><b>Anna Dewdney, </b>Author of<em> NELLY GNU AND DADDY TOO</em></span>
                <span class="info-btn"><p class="selctor" rel="0"><span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
                <span class="mapit" ><a href="#"><b>map</b></a></span>
                <span class="premove hidden" rel="0"><a href="#">Remove</a></span></p></span></td>
            </tr>
        </table>
    </div>

    <div class="11am target-stage stage-only saturday eventer" id="row1" rel="1">
        <table border="0" cellspacing="0" cellpadding="0" style="border:none;">
            <tr>
                <td valign="top" align="left" class="ev-time" style="border:none;">11:00 a.m. </td>
                <td valign="top" class="ev-desc">
                <span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children&rsquo;s Stage</b></span></p></span>
                <span class="info-body"><b>Yuyi Morales, </b>Author of<em> NIÑO WRESTLES THE WORLD</em></span>
                <span class="info-btn"><p class="selctor" rel="1"> <span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
                <span class="mapit" > <a href="#"><b>map</b></a></span>
                <span class="premove hidden" rel="1"><a href="#">Remove</a></span></p></span></td>
            </tr>
        </table>
    </div>

    <div class="11am target-stage stage-only saturday eventer" id="row2" rel="2">
        <table border="0" cellspacing="0" cellpadding="0" style="border:none;">     
            <tr>
                <td valign="top" align="left" class="ev-time" style="border:none;">11:30 a.m. </td>
                <td valign="top" class="ev-desc">
                <span class="info"><p class="ev-date">SATURDAY, APRIL. 18, 2015<br /><span class="ev-title"><b>Children&rsquo;s Stage</b></span><br /><span class="ev-signings">Signing Area 4</span></p></span>
                <span class="info-body"><em>Scooby-Doo and the Carnival Creep,</em> presented by <b>Warner Bros. Consumer Products</b></span>
                <span class="info-btn"><p class="selctor" rel="2"> <span class="addSchd"><a href="#"><b>+ MY SCHEDULE</b></a></span>
                <span class="mapit"><a href="#"><b>map</b></a></span>
                <span class="premove hidden" rel="2"><a href="#">Remove</a></span></p></span></td>
            </tr>
        </table>
    </div></div>
    <script>
      $(document).ready(function(){
        var storaged = Object.keys(localStorage);
        var storageLength = storaged.length;

            for (var i=0; i<storageLength; i++)
            {
                var el = $(localStorage[storaged[i]]);
                $("#result").append(el);
            }

        $("#buttn2").click(function(){
        localStorage.clear();
        $("#result").html('');
        console.log("Storage is cleared");
        });

        $(".premove").click(function (event) {
          event.preventDefault();
          var a=$(this).attr("rel");
          console.log(a);
          var eventsArray = document.getElementsByClassName("eventer");
          var eventSelctd=(eventsArray[a]).outerHTML;
          localStorage.removeItem("schedule " + a, eventSelctd);
          eventsArray[a].outerHTML="";
          });
      });           
    </script>

Answer 1

您正在为列表中的每个项添加rel=(number)并使用该数字在document.getElementsByClassName("eventer")定义的数组中获取其引用 - 每次删除项时，数组都会变短，因为已删除的项现在已经不见了，每次点击删除按钮都会重新定义它。会发生什么事情，你最终开始寻找第4项，但它并不存在，因为列表中只有两个项目。

另一种方法是查找距离按钮最近的元素并将其删除。

var eventSelected = $(this).closest('.eventer'); 
localStorage.removeItem("schedule " + a, eventSelected[0]);
eventSelected.remove();

数组“有时”未定义

1 个答案: